a crazy iteration
This commit is contained in:
Ramon Perez
parent
077707b0a3
commit
78706a40c5
@ -6,6 +6,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/starlight": "^0.35.1",
|
"@astrojs/starlight": "^0.35.1",
|
||||||
"astro": "^5.6.1",
|
"astro": "^5.6.1",
|
||||||
|
"gsap": "^3.13.0",
|
||||||
|
"phosphor-astro": "^2.1.0",
|
||||||
"sharp": "^0.34.2",
|
"sharp": "^0.34.2",
|
||||||
"starlight-sidebar-topics": "^0.6.0",
|
"starlight-sidebar-topics": "^0.6.0",
|
||||||
"starlight-theme-rapide": "^0.5.1",
|
"starlight-theme-rapide": "^0.5.1",
|
||||||
@ -432,6 +434,8 @@
|
|||||||
|
|
||||||
"github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],
|
"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=="],
|
"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=="],
|
"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=="],
|
"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=="],
|
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
|
||||||
|
|
||||||
"picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
|
"picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
|
||||||
|
|||||||
371
website/src/components/DoodleBackground.astro
Normal file
371
website/src/components/DoodleBackground.astro
Normal file
@ -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
|
||||||
|
}));
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class={`doodle-background ${variant} ${density} ${animated ? 'animated' : ''}`} data-pattern={pattern}>
|
||||||
|
<svg class="doodle-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||||
|
<defs>
|
||||||
|
<!-- Define reusable doodle shapes -->
|
||||||
|
<g id="squiggle">
|
||||||
|
<path d="M0,0 Q5,5 10,0 T20,0" stroke="currentColor" fill="none" stroke-width="0.5" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g id="star">
|
||||||
|
<path d="M5,0 L6,4 L10,4 L7,6 L8,10 L5,7 L2,10 L3,6 L0,4 L4,4 Z" fill="currentColor"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g id="heart">
|
||||||
|
<path d="M5,3 C5,1 3,0 2,1 C1,0 0,1 0,2 C0,3 1,5 5,8 C9,5 10,3 10,2 C10,1 9,0 8,1 C7,0 5,1 5,3 Z" fill="currentColor"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g id="robot-mini">
|
||||||
|
<rect x="2" y="2" width="6" height="6" rx="1" fill="currentColor"/>
|
||||||
|
<circle cx="3.5" cy="4" r="0.5" fill="white"/>
|
||||||
|
<circle cx="6.5" cy="4" r="0.5" fill="white"/>
|
||||||
|
<path d="M3,6 Q5,7 7,6" stroke="white" fill="none" stroke-width="0.5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g id="zigzag">
|
||||||
|
<path d="M0,5 L5,0 L10,5 L15,0 L20,5" stroke="currentColor" fill="none" stroke-width="0.5" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g id="dots">
|
||||||
|
<circle cx="0" cy="0" r="0.5" fill="currentColor"/>
|
||||||
|
<circle cx="3" cy="0" r="0.5" fill="currentColor"/>
|
||||||
|
<circle cx="6" cy="0" r="0.5" fill="currentColor"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g id="triangle">
|
||||||
|
<path d="M5,0 L10,8 L0,8 Z" fill="currentColor" opacity="0.3"/>
|
||||||
|
<path d="M5,0 L10,8 L0,8 Z" stroke="currentColor" fill="none" stroke-width="0.5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g id="circle">
|
||||||
|
<circle cx="5" cy="5" r="4" stroke="currentColor" fill="none" stroke-width="0.5" stroke-dasharray="1,1"/>
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
{doodles.map(doodle => (
|
||||||
|
<g
|
||||||
|
transform={`translate(${doodle.x}, ${doodle.y}) rotate(${doodle.rotation} 5 5) scale(${doodle.size})`}
|
||||||
|
class={`doodle doodle-${doodle.type}`}
|
||||||
|
style={`animation-delay: ${doodle.delay}s`}
|
||||||
|
>
|
||||||
|
<use href={`#${doodle.type === 'dot' ? 'dots' : doodle.type === 'robot' ? 'robot-mini' : doodle.type}`} />
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Additional hand-drawn elements -->
|
||||||
|
<div class="doodle-extras">
|
||||||
|
<div class="floating-annotation">
|
||||||
|
<span class="annotation-text">AI magic happens here!</span>
|
||||||
|
<svg class="annotation-arrow" width="50" height="30">
|
||||||
|
<path d="M5,25 Q25,5 45,15" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" marker-end="url(#arrowhead)"/>
|
||||||
|
<defs>
|
||||||
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="currentColor"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="corner-doodle top-left">
|
||||||
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
||||||
|
<path d="M10,10 Q50,20 40,60 T20,90" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||||
|
<circle cx="20" cy="20" r="3" fill="currentColor" opacity="0.5"/>
|
||||||
|
<circle cx="35" cy="40" r="2" fill="currentColor" opacity="0.5"/>
|
||||||
|
<circle cx="25" cy="70" r="4" fill="currentColor" opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="corner-doodle bottom-right">
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||||
|
<g transform="rotate(180 60 60)">
|
||||||
|
<path d="M20,20 L30,10 L40,20 L50,10 L60,20" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||||
|
<rect x="25" y="30" width="10" height="10" rx="2" stroke="currentColor" fill="none" opacity="0.5"/>
|
||||||
|
<rect x="45" y="35" width="8" height="8" rx="1" stroke="currentColor" fill="none" opacity="0.5"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.doodle-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-svg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color variants */
|
||||||
|
.doodle-background.light .doodle {
|
||||||
|
color: var(--medium-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.dark .doodle {
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.colorful .doodle:nth-child(4n) {
|
||||||
|
color: var(--robot-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.colorful .doodle:nth-child(4n + 1) {
|
||||||
|
color: var(--robot-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.colorful .doodle:nth-child(4n + 2) {
|
||||||
|
color: var(--robot-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.colorful .doodle:nth-child(4n + 3) {
|
||||||
|
color: var(--robot-yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
.doodle-background.animated .doodle {
|
||||||
|
animation: doodleFloat 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.animated .doodle-squiggle {
|
||||||
|
animation: squiggleWave 15s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.animated .doodle-star {
|
||||||
|
animation: starTwinkle 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.animated .doodle-heart {
|
||||||
|
animation: heartPulse 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.animated .doodle-robot {
|
||||||
|
animation: robotDance 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes doodleFloat {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translate(0, 0) rotate(0deg);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translate(5px, -10px) rotate(5deg);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translate(-5px, 5px) rotate(-5deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes squiggleWave {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scaleX(1) scaleY(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scaleX(1.1) scaleY(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes starTwinkle {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes heartPulse {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
25%, 75% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes robotDance {
|
||||||
|
0%, 100% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: rotate(-10deg) translateY(-2px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: rotate(10deg) translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra decorative elements */
|
||||||
|
.doodle-extras {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-annotation {
|
||||||
|
position: absolute;
|
||||||
|
top: 15%;
|
||||||
|
right: 10%;
|
||||||
|
color: var(--robot-pink);
|
||||||
|
font-family: 'Caveat', 'Comic Sans MS', cursive;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transform: rotate(-5deg);
|
||||||
|
opacity: 0;
|
||||||
|
animation: annotationAppear 15s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotation-arrow {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes annotationAppear {
|
||||||
|
0%, 70%, 100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: rotate(-5deg) scale(0.8);
|
||||||
|
}
|
||||||
|
80%, 90% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(-5deg) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-doodle {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-doodle.top-left {
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-doodle.bottom-right {
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pattern-specific styles */
|
||||||
|
.doodle-background[data-pattern="robots"] .doodle:not(.doodle-robot) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background[data-pattern="shapes"] .doodle-robot {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background[data-pattern="tech"] .doodle-heart,
|
||||||
|
.doodle-background[data-pattern="tech"] .doodle-star {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Density adjustments */
|
||||||
|
.doodle-background.sparse .doodle-svg {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doodle-background.dense .doodle-svg {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.floating-annotation {
|
||||||
|
font-size: 1rem;
|
||||||
|
top: 10%;
|
||||||
|
right: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-doodle {
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.doodle-background.animated .doodle,
|
||||||
|
.floating-annotation {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode adjustments */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.doodle-background.light .doodle {
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Add interactive easter eggs
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const doodleBackground = document.querySelector('.doodle-background');
|
||||||
|
|
||||||
|
if (doodleBackground) {
|
||||||
|
// Random annotation messages
|
||||||
|
const annotations = [
|
||||||
|
"AI magic happens here!",
|
||||||
|
"Robots working hard!",
|
||||||
|
"← This is where the fun begins",
|
||||||
|
"100% locally powered!",
|
||||||
|
"No clouds were harmed",
|
||||||
|
"Beep boop beep! 🤖"
|
||||||
|
];
|
||||||
|
|
||||||
|
const annotationText = doodleBackground.querySelector('.annotation-text');
|
||||||
|
if (annotationText) {
|
||||||
|
setInterval(() => {
|
||||||
|
const randomMessage = annotations[Math.floor(Math.random() * annotations.length)];
|
||||||
|
annotationText.textContent = randomMessage;
|
||||||
|
}, 15000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
900
website/src/components/products/ProductsArchitecture.astro
Normal file
900
website/src/components/products/ProductsArchitecture.astro
Normal file
@ -0,0 +1,900 @@
|
|||||||
|
---
|
||||||
|
// ProductsArchitecture.astro - 3-layer stack explanation component
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="architecture" class="products-section architecture-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-badge">
|
||||||
|
<div class="badge-robot">
|
||||||
|
<div class="badge-robot-head"></div>
|
||||||
|
<div class="badge-robot-body">Stack</div>
|
||||||
|
</div>
|
||||||
|
<span>How Jan Works</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">Three Layers, One Experience</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Architecture Stack Visualization -->
|
||||||
|
<div class="architecture-stack">
|
||||||
|
<!-- Tools Layer (Top) -->
|
||||||
|
<div class="stack-layer tools-layer" data-layer="tools">
|
||||||
|
<div class="layer-number">3</div>
|
||||||
|
<div class="layer-robot">
|
||||||
|
<div class="tools-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body"></div>
|
||||||
|
<div class="robot-arms">
|
||||||
|
<div class="arm left-arm"></div>
|
||||||
|
<div class="arm right-arm"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-content">
|
||||||
|
<h3>Tools & Capabilities</h3>
|
||||||
|
<p>AI capabilities that actually get things done. Not just chat, but real automation and intelligence augmentation.</p>
|
||||||
|
<div class="layer-features">
|
||||||
|
<div class="feature-item active">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Web Search</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item active">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Deep Research</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item beta">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Browser Use</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item coming">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>AI Agents</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-connection">
|
||||||
|
<div class="connection-line tools-to-models"></div>
|
||||||
|
<div class="data-flow">
|
||||||
|
<div class="flow-packet"></div>
|
||||||
|
<div class="flow-packet"></div>
|
||||||
|
<div class="flow-packet"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Models Layer (Middle) -->
|
||||||
|
<div class="stack-layer models-layer" data-layer="models">
|
||||||
|
<div class="layer-number">2</div>
|
||||||
|
<div class="layer-robot">
|
||||||
|
<div class="models-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye thinking"></div>
|
||||||
|
<div class="robot-eye thinking"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-content">
|
||||||
|
<h3>AI Models</h3>
|
||||||
|
<p>Purpose-built models, not API wrappers. Trained by us, optimized for privacy and performance.</p>
|
||||||
|
<div class="layer-features">
|
||||||
|
<div class="feature-item active">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Jan V1 Series</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item beta">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Jan Nano</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item coming">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Lucy (Multimodal)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-connection">
|
||||||
|
<div class="connection-line models-to-platforms"></div>
|
||||||
|
<div class="data-flow">
|
||||||
|
<div class="flow-packet"></div>
|
||||||
|
<div class="flow-packet"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Platforms Layer (Bottom) -->
|
||||||
|
<div class="stack-layer platforms-layer" data-layer="platforms">
|
||||||
|
<div class="layer-number">1</div>
|
||||||
|
<div class="layer-robot">
|
||||||
|
<div class="platforms-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body"></div>
|
||||||
|
<div class="robot-base">
|
||||||
|
<div class="base-foundation"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-content">
|
||||||
|
<h3>Platform Ecosystem</h3>
|
||||||
|
<p>Run anywhere - desktop, web, mobile, or server. Your AI assistant follows you across all devices.</p>
|
||||||
|
<div class="layer-features">
|
||||||
|
<div class="feature-item active">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Desktop App</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item beta">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>jan.ai Web</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item coming">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Mobile Apps</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item coming">
|
||||||
|
<div class="feature-status"></div>
|
||||||
|
<span>Server Edition</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Architecture Benefits -->
|
||||||
|
<div class="architecture-benefits">
|
||||||
|
<h3>Why This Architecture Matters</h3>
|
||||||
|
<div class="benefits-grid">
|
||||||
|
<div class="benefit-card">
|
||||||
|
<div class="benefit-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4>Tight Integration</h4>
|
||||||
|
<p>Each layer is designed to work perfectly with the others. No API incompatibilities or integration headaches.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="benefit-card">
|
||||||
|
<div class="benefit-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4>Your Control</h4>
|
||||||
|
<p>Own your models, choose your deployment, control your data. No vendor lock-in or surprise policy changes.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="benefit-card">
|
||||||
|
<div class="benefit-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4>Scales With You</h4>
|
||||||
|
<p>Start simple with local models, add cloud power when needed, deploy for teams when you're ready.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Interactive Demo -->
|
||||||
|
<div class="architecture-demo">
|
||||||
|
<h3>See It In Action</h3>
|
||||||
|
<div class="demo-container">
|
||||||
|
<div class="demo-scenario active" data-scenario="search">
|
||||||
|
<div class="scenario-title">User asks: "Find recent AI research papers"</div>
|
||||||
|
<div class="demo-flow">
|
||||||
|
<div class="flow-step" data-step="1">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<strong>Tools Layer:</strong> Web Search tool activates
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step" data-step="2">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<strong>Models Layer:</strong> Jan V1 processes the request
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flow-arrow"></div>
|
||||||
|
<div class="flow-step" data-step="3">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<strong>Platform Layer:</strong> Results displayed in your app
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.architecture-section {
|
||||||
|
background: var(--light-gray);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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(--light-purple);
|
||||||
|
border-left-width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-layer {
|
||||||
|
border-color: var(--soft-pink);
|
||||||
|
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 { background: var(--light-purple); }
|
||||||
|
.tools-robot .robot-body { background: var(--light-purple); }
|
||||||
|
|
||||||
|
.models-robot .robot-head { background: var(--soft-pink); }
|
||||||
|
.models-robot .robot-body { background: var(--soft-pink); }
|
||||||
|
|
||||||
|
.platforms-robot .robot-head { background: var(--pastel-blue); }
|
||||||
|
.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-specific details */
|
||||||
|
.robot-tools-display {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-icon {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-icon.search { background: var(--success-green); }
|
||||||
|
.tool-icon.research { background: var(--primary-blue); }
|
||||||
|
.tool-icon.browser { background: var(--warning-amber); }
|
||||||
|
|
||||||
|
.robot-brain {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brain-wave {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--primary-blue);
|
||||||
|
margin: 1px 0;
|
||||||
|
border-radius: 1px;
|
||||||
|
animation: brainWave 2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brain-wave:nth-child(2) { animation-delay: 0.3s; }
|
||||||
|
.brain-wave:nth-child(3) { animation-delay: 0.6s; }
|
||||||
|
|
||||||
|
.neural-network {
|
||||||
|
position: relative;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-node {
|
||||||
|
position: absolute;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-node:nth-child(1) { top: 5px; left: 5px; }
|
||||||
|
.network-node:nth-child(2) { top: 5px; right: 5px; }
|
||||||
|
.network-node:nth-child(3) { bottom: 5px; left: 50%; transform: translateX(-50%); }
|
||||||
|
|
||||||
|
.network-connection {
|
||||||
|
position: absolute;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-connection:nth-child(4) {
|
||||||
|
top: 8px;
|
||||||
|
left: 11px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-connection:nth-child(5) {
|
||||||
|
top: 11px;
|
||||||
|
left: 17px;
|
||||||
|
width: 15px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-icon.desktop { background: var(--success-green); }
|
||||||
|
.platform-icon.mobile { background: var(--warning-amber); }
|
||||||
|
.platform-icon.web { background: var(--primary-blue); }
|
||||||
|
.platform-icon.server { background: var(--medium-gray); }
|
||||||
|
|
||||||
|
.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;
|
||||||
|
right: -20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-line {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--border-color);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-flow {
|
||||||
|
position: absolute;
|
||||||
|
top: -5px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-packet {
|
||||||
|
position: absolute;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--primary-blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: flowData 3s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 brainWave {
|
||||||
|
0%, 100% { opacity: 0.3; transform: scaleX(1); }
|
||||||
|
50% { opacity: 1; transform: scaleX(1.2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flowData {
|
||||||
|
0% { left: 0; opacity: 0; }
|
||||||
|
10% { opacity: 1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { left: calc(100% - 6px); 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, .brain-wave, .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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Add interactive hover effects for stack layers
|
||||||
|
const stackLayers = document.querySelectorAll('.stack-layer');
|
||||||
|
|
||||||
|
stackLayers.forEach(layer => {
|
||||||
|
layer.addEventListener('mouseenter', () => {
|
||||||
|
const robot = layer.querySelector('.tools-robot, .models-robot, .platforms-robot');
|
||||||
|
if (robot) {
|
||||||
|
robot.style.animation = 'bounce 0.6s ease-in-out';
|
||||||
|
setTimeout(() => {
|
||||||
|
robot.style.animation = '';
|
||||||
|
}, 600);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animate flow packets when layer is in view
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.5,
|
||||||
|
rootMargin: '0px 0px -100px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const flowPackets = entry.target.querySelectorAll('.flow-packet');
|
||||||
|
flowPackets.forEach((packet, index) => {
|
||||||
|
packet.style.animationDelay = `${index}s`;
|
||||||
|
packet.style.animationPlayState = 'running';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
stackLayers.forEach(layer => {
|
||||||
|
observer.observe(layer);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add click interaction for demo steps
|
||||||
|
const demoSteps = document.querySelectorAll('.flow-step');
|
||||||
|
demoSteps.forEach((step, index) => {
|
||||||
|
step.addEventListener('click', () => {
|
||||||
|
// Remove active class from all steps
|
||||||
|
demoSteps.forEach(s => s.classList.remove('active'));
|
||||||
|
|
||||||
|
// Add active class to clicked step and previous steps
|
||||||
|
for (let i = 0; i <= index; i++) {
|
||||||
|
demoSteps[i].classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
696
website/src/components/products/ProductsHero.astro
Normal file
696
website/src/components/products/ProductsHero.astro
Normal file
@ -0,0 +1,696 @@
|
|||||||
|
---
|
||||||
|
// ProductsHero.astro - Hero section with blue-tinted background and friendly robot
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="hero" class="products-hero">
|
||||||
|
<div class="hero-background">
|
||||||
|
<div class="floating-clouds">
|
||||||
|
<div class="cloud cloud-1"></div>
|
||||||
|
<div class="cloud cloud-2"></div>
|
||||||
|
<div class="cloud cloud-3"></div>
|
||||||
|
<div class="cloud cloud-4"></div>
|
||||||
|
</div>
|
||||||
|
<div class="floating-elements">
|
||||||
|
<div class="element element-1"></div>
|
||||||
|
<div class="element element-2"></div>
|
||||||
|
<div class="element element-3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-badge">
|
||||||
|
<div class="badge-robot">
|
||||||
|
<div class="badge-robot-head"></div>
|
||||||
|
<div class="badge-robot-body">AI</div>
|
||||||
|
</div>
|
||||||
|
<span>Full Stack AI Solution</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="hero-title">
|
||||||
|
<span class="title-main">Jan's Product Roadmap</span>
|
||||||
|
<span class="title-sub">AI that runs where you need it, how you need it</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="hero-description">
|
||||||
|
Complete ecosystem of models, applications, and tools. Let's build the future of AI together!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hero-robot">
|
||||||
|
<div class="robot-container bounce">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-blush left"></div>
|
||||||
|
<div class="robot-blush right"></div>
|
||||||
|
<div class="robot-antenna">
|
||||||
|
<div class="antenna-light"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye left-eye wink">
|
||||||
|
<div class="eye-shine"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-eye right-eye excited">
|
||||||
|
<div class="eye-shine"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-mouth happy"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-panel">
|
||||||
|
<div class="panel-light green pulse"></div>
|
||||||
|
<div class="panel-light blue pulse" style="animation-delay: 0.5s;"></div>
|
||||||
|
<div class="panel-light amber pulse" style="animation-delay: 1s;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-screen">
|
||||||
|
<div class="screen-content">
|
||||||
|
<div class="code-line"></div>
|
||||||
|
<div class="code-line short"></div>
|
||||||
|
<div class="code-line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-arms">
|
||||||
|
<div class="arm left-arm wave"></div>
|
||||||
|
<div class="arm right-arm wave" style="animation-delay: 1s;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-sparkles">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="speech-bubble">
|
||||||
|
<span>Ready to build amazing AI experiences?</span>
|
||||||
|
<div class="bubble-tail"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-stats">
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-number">3</div>
|
||||||
|
<div class="stat-label">AI Models</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-number">4</div>
|
||||||
|
<div class="stat-label">Platforms</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-number">4</div>
|
||||||
|
<div class="stat-label">Tools</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.products-hero {
|
||||||
|
background: linear-gradient(135deg, #8338EC 0%, #3A86FF 25%, #FF006E 50%, #FFB700 75%, #06FFA5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-clouds {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud {
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 50px;
|
||||||
|
opacity: 0.7;
|
||||||
|
animation: float 20s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud-1 {
|
||||||
|
width: 120px;
|
||||||
|
height: 80px;
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud-2 {
|
||||||
|
width: 100px;
|
||||||
|
height: 60px;
|
||||||
|
top: 25%;
|
||||||
|
right: 10%;
|
||||||
|
animation-delay: -5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud-3 {
|
||||||
|
width: 80px;
|
||||||
|
height: 50px;
|
||||||
|
top: 60%;
|
||||||
|
left: 15%;
|
||||||
|
animation-delay: -10s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud-4 {
|
||||||
|
width: 140px;
|
||||||
|
height: 90px;
|
||||||
|
top: 70%;
|
||||||
|
right: 5%;
|
||||||
|
animation-delay: -15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-elements {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element {
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: elementFloat 15s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-1 {
|
||||||
|
top: 20%;
|
||||||
|
left: 20%;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-2 {
|
||||||
|
top: 40%;
|
||||||
|
right: 25%;
|
||||||
|
animation-delay: -5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-3 {
|
||||||
|
top: 75%;
|
||||||
|
left: 60%;
|
||||||
|
animation-delay: -10s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-robot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-robot-head {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-robot-body {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-main {
|
||||||
|
display: block;
|
||||||
|
font-size: clamp(2.5rem, 8vw, 4rem);
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-sub {
|
||||||
|
display: block;
|
||||||
|
font-size: clamp(1.2rem, 4vw, 1.8rem);
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.9;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: clamp(1.1rem, 3vw, 1.3rem);
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
opacity: 0.9;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Robot */
|
||||||
|
.hero-robot {
|
||||||
|
margin: 3rem 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-head {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: linear-gradient(135deg, #FFB700 0%, #FB5607 100%);
|
||||||
|
border-radius: 25px;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto 15px;
|
||||||
|
border: 4px solid #1A1A2E;
|
||||||
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-antenna {
|
||||||
|
position: absolute;
|
||||||
|
top: -25px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 20px;
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.antenna-light {
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #FF006E;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #1A1A2E;
|
||||||
|
animation: antennaGlow 2s infinite;
|
||||||
|
box-shadow: 0 0 20px rgba(255, 0, 110, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-eyes {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 15px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-eye {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: #1A1A2E;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-eye.wink {
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 0;
|
||||||
|
animation: winkAnimation 4s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-eye.excited {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-shine {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
right: 3px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-mouth.happy {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 30px;
|
||||||
|
height: 15px;
|
||||||
|
border: 4px solid #1e293b;
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 30px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-body {
|
||||||
|
width: 120px;
|
||||||
|
height: 140px;
|
||||||
|
background: linear-gradient(135deg, #06FFA5 0%, #00F5FF 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 4px solid #1A1A2E;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-panel {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 25px 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-light {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-light.green { background: #22c55e; }
|
||||||
|
.panel-light.blue { background: #3b82f6; }
|
||||||
|
.panel-light.amber { background: #f59e0b; }
|
||||||
|
|
||||||
|
.robot-screen {
|
||||||
|
width: 80px;
|
||||||
|
height: 50px;
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-line {
|
||||||
|
height: 3px;
|
||||||
|
background: #22c55e;
|
||||||
|
border-radius: 2px;
|
||||||
|
animation: codeFlow 3s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-line.short {
|
||||||
|
width: 60%;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-arms {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: -70px;
|
||||||
|
padding: 0 25px;
|
||||||
|
position: relative;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arm {
|
||||||
|
width: 15px;
|
||||||
|
height: 50px;
|
||||||
|
background: #fed7aa;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 3px solid #1e293b;
|
||||||
|
transform-origin: top center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speech-bubble {
|
||||||
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
left: 130%;
|
||||||
|
background: white;
|
||||||
|
color: #1e293b;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 3px solid #1e293b;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
animation: bubbleBounce 4s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-tail {
|
||||||
|
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 white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-tail::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -3px;
|
||||||
|
top: -12px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 12px solid transparent;
|
||||||
|
border-bottom: 12px solid transparent;
|
||||||
|
border-right: 15px solid #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px) translateX(0px); }
|
||||||
|
25% { transform: translateY(-20px) translateX(10px); }
|
||||||
|
50% { transform: translateY(0px) translateX(20px); }
|
||||||
|
75% { transform: translateY(-10px) translateX(10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes elementFloat {
|
||||||
|
0%, 100% { transform: translateY(0px) scale(1); opacity: 0.5; }
|
||||||
|
50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||||||
|
50% { transform: scale(1.1); opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes antennaGlow {
|
||||||
|
0%, 100% {
|
||||||
|
background: #FF006E;
|
||||||
|
box-shadow: 0 0 20px rgba(255, 0, 110, 0.6);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background: #06FFA5;
|
||||||
|
box-shadow: 0 0 30px rgba(6, 255, 165, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes winkAnimation {
|
||||||
|
0%, 90%, 100% { height: 20px; border-radius: 50%; }
|
||||||
|
95% { height: 2px; border-radius: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-blush {
|
||||||
|
position: absolute;
|
||||||
|
width: 15px;
|
||||||
|
height: 10px;
|
||||||
|
background: rgba(255, 0, 110, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-blush.left {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-blush.right {
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-sparkles {
|
||||||
|
position: absolute;
|
||||||
|
top: -30px;
|
||||||
|
left: -30px;
|
||||||
|
right: -30px;
|
||||||
|
bottom: -30px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
position: absolute;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: #FFB700;
|
||||||
|
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||||||
|
animation: sparkleFloat 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.7s; }
|
||||||
|
.sparkle:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 1.4s; }
|
||||||
|
.sparkle:nth-child(4) { bottom: 10%; right: 25%; animation-delay: 2.1s; }
|
||||||
|
|
||||||
|
@keyframes sparkleFloat {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0) rotate(0deg) translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) rotate(180deg) translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0%, 100% { transform: rotate(0deg); }
|
||||||
|
25% { transform: rotate(-15deg); }
|
||||||
|
75% { transform: rotate(15deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes codeFlow {
|
||||||
|
0% { width: 0%; opacity: 0; }
|
||||||
|
50% { width: 100%; opacity: 1; }
|
||||||
|
100% { width: 100%; opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bubbleBounce {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-5px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.speech-bubble {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.products-hero {
|
||||||
|
min-height: 80vh;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-robot {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-head {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-body {
|
||||||
|
width: 100px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hero-description {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-arms {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.cloud, .element, .robot-container, .panel-light, .arm, .antenna-light, .code-line, .speech-bubble {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
909
website/src/components/products/ProductsModels.astro
Normal file
909
website/src/components/products/ProductsModels.astro
Normal file
@ -0,0 +1,909 @@
|
|||||||
|
---
|
||||||
|
// ProductsModels.astro - AI Models section with detailed specifications
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="models" class="products-section models-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-badge">
|
||||||
|
<div class="badge-robot">
|
||||||
|
<div class="badge-robot-head"></div>
|
||||||
|
<div class="badge-robot-body">AI</div>
|
||||||
|
</div>
|
||||||
|
<span>AI Models</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">Our AI Models</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Models Grid -->
|
||||||
|
<div class="models-grid">
|
||||||
|
<!-- Jan V1 Series -->
|
||||||
|
<div class="model-card jan-v1 feature-card">
|
||||||
|
<div class="model-robot-section">
|
||||||
|
<div class="model-robot v1-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-glasses">
|
||||||
|
<div class="glasses-frame left">
|
||||||
|
<div class="robot-eye nerdy"></div>
|
||||||
|
</div>
|
||||||
|
<div class="glasses-bridge"></div>
|
||||||
|
<div class="glasses-frame right">
|
||||||
|
<div class="robot-eye nerdy"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-smile cheeky"></div>
|
||||||
|
<div class="robot-antenna">
|
||||||
|
<div class="antenna-tip active"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-thinking-bubbles">
|
||||||
|
<div class="bubble small"></div>
|
||||||
|
<div class="bubble medium"></div>
|
||||||
|
<div class="bubble large">🧠</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-chest">
|
||||||
|
<div class="chest-panel">
|
||||||
|
<div class="panel-line active"></div>
|
||||||
|
<div class="panel-line active"></div>
|
||||||
|
<div class="panel-line active"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-pocket-protector">
|
||||||
|
<div class="pen"></div>
|
||||||
|
<div class="pen"></div>
|
||||||
|
<div class="calculator">π</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-badge">V1</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-arms">
|
||||||
|
<div class="arm left-arm"></div>
|
||||||
|
<div class="arm right-arm"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="model-status-bubble">
|
||||||
|
<div class="status-badge status-active">Production Ready</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-content">
|
||||||
|
<div class="model-header">
|
||||||
|
<h3>Jan V1 Series</h3>
|
||||||
|
<div class="model-version">v1.2.1</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="model-description">
|
||||||
|
Complete model family designed to compete with Claude and GPT-4.
|
||||||
|
Optimized for reasoning, coding, and general conversation.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="model-specs">
|
||||||
|
<div class="spec-section">
|
||||||
|
<h4>Model Sizes</h4>
|
||||||
|
<div class="spec-grid">
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">7B</div>
|
||||||
|
<div class="spec-value">8GB RAM</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">13B</div>
|
||||||
|
<div class="spec-value">16GB RAM</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">70B</div>
|
||||||
|
<div class="spec-value">64GB RAM</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="spec-section">
|
||||||
|
<h4>Performance</h4>
|
||||||
|
<div class="spec-highlight">
|
||||||
|
<div class="highlight-label">Context Window</div>
|
||||||
|
<div class="highlight-value">32,768 tokens</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-capabilities">
|
||||||
|
<h4>Capabilities</h4>
|
||||||
|
<div class="capabilities-grid">
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon reasoning"></div>
|
||||||
|
<span>Reasoning</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon coding"></div>
|
||||||
|
<span>Code Generation</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon multilingual"></div>
|
||||||
|
<span>Multilingual</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon tools"></div>
|
||||||
|
<span>Tool Use</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-metrics">
|
||||||
|
<div class="metric">
|
||||||
|
<div class="metric-value">Production</div>
|
||||||
|
<div class="metric-label">Status</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<div class="metric-value">3M+</div>
|
||||||
|
<div class="metric-label">Downloads</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Jan Nano -->
|
||||||
|
<div class="model-card jan-nano feature-card">
|
||||||
|
<div class="model-robot-section">
|
||||||
|
<div class="model-robot nano-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye research scanning"></div>
|
||||||
|
<div class="robot-eye research scanning"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-smile curious"></div>
|
||||||
|
<div class="robot-scanner active">
|
||||||
|
<div class="scanner-beam"></div>
|
||||||
|
<div class="scanner-grid"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-research-goggles">
|
||||||
|
<div class="goggle-strap"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-chest">
|
||||||
|
<div class="research-display active">
|
||||||
|
<div class="display-wave"></div>
|
||||||
|
<div class="display-wave"></div>
|
||||||
|
<div class="display-wave"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-lab-coat">
|
||||||
|
<div class="coat-collar"></div>
|
||||||
|
<div class="coat-buttons">
|
||||||
|
<div class="button"></div>
|
||||||
|
<div class="button"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-badge">Nano</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-tools">
|
||||||
|
<div class="tool search-tool"></div>
|
||||||
|
<div class="tool analysis-tool"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="model-status-bubble">
|
||||||
|
<div class="status-badge status-beta">Beta</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-content">
|
||||||
|
<div class="model-header">
|
||||||
|
<h3>Jan Nano</h3>
|
||||||
|
<div class="model-version">v0.6.0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="model-description">
|
||||||
|
Specialized for research and information retrieval. Native MCP integration
|
||||||
|
for web search, document analysis, and knowledge synthesis. Available in 2 flavors.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="model-specs">
|
||||||
|
<div class="spec-section">
|
||||||
|
<h4>Specifications</h4>
|
||||||
|
<div class="spec-grid">
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Parameters</div>
|
||||||
|
<div class="spec-value">4B</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">RAM Required</div>
|
||||||
|
<div class="spec-value">6-8GB</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="spec-section">
|
||||||
|
<h4>Context Options</h4>
|
||||||
|
<div class="spec-grid">
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Standard</div>
|
||||||
|
<div class="spec-value">32k tokens</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Extended</div>
|
||||||
|
<div class="spec-value">128k tokens</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-capabilities">
|
||||||
|
<h4>Specialized For</h4>
|
||||||
|
<div class="capabilities-grid">
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon search"></div>
|
||||||
|
<span>Web Search</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon document"></div>
|
||||||
|
<span>Document Analysis</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon mobile"></div>
|
||||||
|
<span>Mobile Optimized</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability active">
|
||||||
|
<div class="capability-icon mcp"></div>
|
||||||
|
<span>MCP Tools</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-metrics">
|
||||||
|
<div class="metric">
|
||||||
|
<div class="metric-value">Beta</div>
|
||||||
|
<div class="metric-label">Status</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<div class="metric-value">2</div>
|
||||||
|
<div class="metric-label">Flavors</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lucy -->
|
||||||
|
<div class="model-card lucy feature-card">
|
||||||
|
<div class="model-robot-section">
|
||||||
|
<div class="model-robot lucy-robot">
|
||||||
|
<div class="robot-head dreamy">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye sleeping dreaming"></div>
|
||||||
|
<div class="robot-eye sleeping dreaming"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-dream-cloud">
|
||||||
|
<div class="dream-content">
|
||||||
|
<span class="dream-emoji">🌟</span>
|
||||||
|
<span class="dream-emoji">👁️</span>
|
||||||
|
<span class="dream-emoji">🎨</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-sleep-cap">
|
||||||
|
<div class="cap-pom-pom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-pajamas">
|
||||||
|
<div class="pajama-pattern">
|
||||||
|
<div class="star"></div>
|
||||||
|
<div class="star"></div>
|
||||||
|
<div class="moon">🌙</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-badge dreamy">Lucy</div>
|
||||||
|
<div class="robot-teddy-bear">🧸</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-progress">
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill training"></div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-text">Training...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="model-status-bubble">
|
||||||
|
<div class="status-badge status-coming">Q2 2025</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-content">
|
||||||
|
<div class="model-header">
|
||||||
|
<h3>Lucy</h3>
|
||||||
|
<div class="model-version">v0.1.0-alpha</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="model-description">
|
||||||
|
Advanced multimodal capabilities for image understanding, document processing,
|
||||||
|
and visual reasoning tasks. The future of AI interaction.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="model-specs">
|
||||||
|
<div class="spec-section">
|
||||||
|
<h4>Modalities</h4>
|
||||||
|
<div class="spec-grid">
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Vision</div>
|
||||||
|
<div class="spec-value">Ready</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Text</div>
|
||||||
|
<div class="spec-value">Ready</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Audio</div>
|
||||||
|
<div class="spec-value">Soon</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="spec-section">
|
||||||
|
<h4>Timeline</h4>
|
||||||
|
<div class="spec-highlight">
|
||||||
|
<div class="highlight-label">Release Target</div>
|
||||||
|
<div class="highlight-value">Q2 2025</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-capabilities">
|
||||||
|
<h4>Future Capabilities</h4>
|
||||||
|
<div class="capabilities-grid">
|
||||||
|
<div class="capability coming">
|
||||||
|
<div class="capability-icon image"></div>
|
||||||
|
<span>Image Analysis</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability coming">
|
||||||
|
<div class="capability-icon ocr"></div>
|
||||||
|
<span>OCR</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability coming">
|
||||||
|
<div class="capability-icon visual"></div>
|
||||||
|
<span>Visual Reasoning</span>
|
||||||
|
</div>
|
||||||
|
<div class="capability coming">
|
||||||
|
<div class="capability-icon processing"></div>
|
||||||
|
<span>Document Processing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-metrics">
|
||||||
|
<div class="metric">
|
||||||
|
<div class="metric-value">Training</div>
|
||||||
|
<div class="metric-label">Status</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<div class="metric-value">Multimodal</div>
|
||||||
|
<div class="metric-label">Type</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Model Comparison -->
|
||||||
|
<div class="models-comparison">
|
||||||
|
<h3>Choose Your Model</h3>
|
||||||
|
<div class="comparison-table">
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="header-cell feature-col">Feature</div>
|
||||||
|
<div class="header-cell model-col jan-v1">Jan V1</div>
|
||||||
|
<div class="header-cell model-col jan-nano">Jan Nano</div>
|
||||||
|
<div class="header-cell model-col lucy">Lucy</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row">
|
||||||
|
<div class="table-cell feature-col">Use Case</div>
|
||||||
|
<div class="table-cell model-col">General AI</div>
|
||||||
|
<div class="table-cell model-col">Research & Mobile</div>
|
||||||
|
<div class="table-cell model-col">Multimodal AI</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row">
|
||||||
|
<div class="table-cell feature-col">Status</div>
|
||||||
|
<div class="table-cell model-col">
|
||||||
|
<div class="status-indicator active">Production</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell model-col">
|
||||||
|
<div class="status-indicator beta">Beta</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell model-col">
|
||||||
|
<div class="status-indicator coming">Coming</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row">
|
||||||
|
<div class="table-cell feature-col">Parameters</div>
|
||||||
|
<div class="table-cell model-col">7B - 70B</div>
|
||||||
|
<div class="table-cell model-col">4B</div>
|
||||||
|
<div class="table-cell model-col">TBD</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row">
|
||||||
|
<div class="table-cell feature-col">RAM Required</div>
|
||||||
|
<div class="table-cell model-col">8GB - 64GB</div>
|
||||||
|
<div class="table-cell model-col">6GB - 8GB</div>
|
||||||
|
<div class="table-cell model-col">TBD</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row">
|
||||||
|
<div class="table-cell feature-col">Best For</div>
|
||||||
|
<div class="table-cell model-col">Coding, Reasoning</div>
|
||||||
|
<div class="table-cell model-col">Research, Mobile</div>
|
||||||
|
<div class="table-cell model-col">Vision, Documents</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import '/src/styles/products-models.css';
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nerdy V1 Robot Styles */
|
||||||
|
.robot-glasses {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12px 8px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glasses-frame {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: 3px solid var(--dark-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glasses-bridge {
|
||||||
|
width: 8px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
margin: 0 -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-eye.nerdy {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
animation: nerdyBlink 5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-thinking-bubbles {
|
||||||
|
position: absolute;
|
||||||
|
top: -40px;
|
||||||
|
right: -20px;
|
||||||
|
animation: bubbleFloat 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble.small {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble.medium {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
bottom: 10px;
|
||||||
|
left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble.large {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
bottom: 25px;
|
||||||
|
left: -15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-pocket-protector {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pen {
|
||||||
|
width: 3px;
|
||||||
|
height: 15px;
|
||||||
|
background: var(--primary-blue);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Research Nano Robot Styles */
|
||||||
|
.robot-eye.scanning {
|
||||||
|
animation: scanEyes 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-scanner.active {
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 60px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanner-beam {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--soft-green), transparent);
|
||||||
|
animation: beamScan 3s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanner-grid {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image:
|
||||||
|
repeating-linear-gradient(0deg, transparent, transparent 4px, var(--soft-green) 4px, var(--soft-green) 5px),
|
||||||
|
repeating-linear-gradient(90deg, transparent, transparent 4px, var(--soft-green) 4px, var(--soft-green) 5px);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-research-goggles {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: -5px;
|
||||||
|
right: -5px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goggle-strap {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: -10px;
|
||||||
|
right: -10px;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.research-display.active {
|
||||||
|
animation: dataFlow 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-wave {
|
||||||
|
height: 2px;
|
||||||
|
background: var(--soft-green);
|
||||||
|
margin: 2px 0;
|
||||||
|
border-radius: 1px;
|
||||||
|
animation: waveform 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-wave:nth-child(2) { animation-delay: 0.2s; }
|
||||||
|
.display-wave:nth-child(3) { animation-delay: 0.4s; }
|
||||||
|
|
||||||
|
.robot-lab-coat {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: -5px;
|
||||||
|
right: -5px;
|
||||||
|
height: 40px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coat-collar {
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 30px;
|
||||||
|
height: 10px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-bottom: none;
|
||||||
|
clip-path: polygon(0 0, 30% 0, 50% 100%, 70% 0, 100% 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coat-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 15px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coat-buttons .button {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dreamy Lucy Robot Styles */
|
||||||
|
.robot-head.dreamy {
|
||||||
|
background: linear-gradient(135deg, var(--light-purple), var(--soft-pink));
|
||||||
|
animation: dreamFloat 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-eye.dreaming {
|
||||||
|
animation: dreamingEyes 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-dream-cloud {
|
||||||
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
right: -40px;
|
||||||
|
width: 80px;
|
||||||
|
height: 60px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
animation: cloudFloat 5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-dream-cloud::before,
|
||||||
|
.robot-dream-cloud::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-dream-cloud::before {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
bottom: -10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-dream-cloud::after {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
bottom: -15px;
|
||||||
|
left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dream-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dream-emoji {
|
||||||
|
font-size: 14px;
|
||||||
|
animation: emojiRotate 3s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dream-emoji:nth-child(2) { animation-delay: 1s; }
|
||||||
|
.dream-emoji:nth-child(3) { animation-delay: 2s; }
|
||||||
|
|
||||||
|
.robot-sleep-cap {
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
background: var(--soft-pink);
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-radius: 20px 20px 0 0;
|
||||||
|
clip-path: polygon(0 100%, 10% 20%, 30% 10%, 50% 15%, 70% 5%, 90% 20%, 100% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-pom-pom {
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: 0;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-pajamas {
|
||||||
|
position: absolute;
|
||||||
|
inset: 10px;
|
||||||
|
background: linear-gradient(45deg, #e8d5ff 25%, #fce7f3 25%, #fce7f3 50%, #e8d5ff 50%, #e8d5ff 75%, #fce7f3 75%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pajama-pattern {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star, .moon {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star:nth-child(1) { top: 20%; left: 30%; }
|
||||||
|
.star:nth-child(2) { bottom: 30%; right: 20%; }
|
||||||
|
.moon { top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
||||||
|
|
||||||
|
.robot-badge.dreamy {
|
||||||
|
background: linear-gradient(135deg, var(--light-purple), var(--soft-pink));
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-teddy-bear {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: -15px;
|
||||||
|
font-size: 20px;
|
||||||
|
animation: bearHug 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes nerdyBlink {
|
||||||
|
0%, 90%, 100% { transform: scale(1); }
|
||||||
|
95% { transform: scaleY(0.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bubbleFloat {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-5px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanEyes {
|
||||||
|
0%, 100% { background: var(--dark-text); }
|
||||||
|
50% { background: var(--soft-green); box-shadow: 0 0 10px var(--soft-green); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beamScan {
|
||||||
|
0% { top: 0; opacity: 0; }
|
||||||
|
10% { opacity: 1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { top: 100%; opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes waveform {
|
||||||
|
0%, 100% { transform: scaleY(1); }
|
||||||
|
50% { transform: scaleY(2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dreamFloat {
|
||||||
|
0%, 100% { transform: translateY(0) rotate(-2deg); }
|
||||||
|
50% { transform: translateY(-10px) rotate(2deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cloudFloat {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dreamingEyes {
|
||||||
|
0%, 100% { height: 2px; }
|
||||||
|
50% { height: 2px; transform: scaleX(1.2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes emojiRotate {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bearHug {
|
||||||
|
0%, 100% { transform: rotate(-10deg); }
|
||||||
|
50% { transform: rotate(10deg) scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dataFlow {
|
||||||
|
0%, 100% { opacity: 0.5; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Add interactive hover effects for model robots
|
||||||
|
const modelRobots = document.querySelectorAll('.model-robot');
|
||||||
|
|
||||||
|
modelRobots.forEach(robot => {
|
||||||
|
robot.addEventListener('mouseenter', () => {
|
||||||
|
robot.style.animation = 'bounce 0.6s ease-in-out';
|
||||||
|
setTimeout(() => {
|
||||||
|
robot.style.animation = '';
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add click interactions for capability items
|
||||||
|
const capabilities = document.querySelectorAll('.capability');
|
||||||
|
capabilities.forEach(capability => {
|
||||||
|
capability.addEventListener('click', () => {
|
||||||
|
if (!capability.classList.contains('coming')) {
|
||||||
|
capability.style.transform = 'scale(0.95)';
|
||||||
|
setTimeout(() => {
|
||||||
|
capability.style.transform = '';
|
||||||
|
}, 150);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animate model cards when they come into view
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.2,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
const modelCards = document.querySelectorAll('.model-card');
|
||||||
|
modelCards.forEach(card => {
|
||||||
|
observer.observe(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add comparison table row hover effects
|
||||||
|
const tableRows = document.querySelectorAll('.table-row');
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
row.addEventListener('mouseenter', () => {
|
||||||
|
const cells = row.querySelectorAll('.table-cell');
|
||||||
|
cells.forEach(cell => {
|
||||||
|
cell.style.backgroundColor = 'var(--light-blue)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
row.addEventListener('mouseleave', () => {
|
||||||
|
const cells = row.querySelectorAll('.table-cell');
|
||||||
|
cells.forEach(cell => {
|
||||||
|
cell.style.backgroundColor = 'white';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
1272
website/src/components/products/ProductsPlatforms.astro
Normal file
1272
website/src/components/products/ProductsPlatforms.astro
Normal file
File diff suppressed because it is too large
Load Diff
528
website/src/components/products/ProductsPrinciples.astro
Normal file
528
website/src/components/products/ProductsPrinciples.astro
Normal file
@ -0,0 +1,528 @@
|
|||||||
|
---
|
||||||
|
// ProductsPrinciples.astro - Why Jan is different comparison
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="principles" class="products-section principles-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-badge">
|
||||||
|
<div class="badge-robot">
|
||||||
|
<div class="badge-robot-head"></div>
|
||||||
|
<div class="badge-robot-body">Why</div>
|
||||||
|
</div>
|
||||||
|
<span>Why Jan is Different</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">What Makes Jan Different</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Comparison -->
|
||||||
|
<div class="main-comparison">
|
||||||
|
<div class="comparison-sides">
|
||||||
|
<!-- Other AI Assistants -->
|
||||||
|
<div class="comparison-side other-ai">
|
||||||
|
<div class="side-header">
|
||||||
|
<div class="side-robot other-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye corporate"></div>
|
||||||
|
<div class="robot-eye corporate"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-corporate-hat">
|
||||||
|
<div class="hat-logo">$</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-tie">
|
||||||
|
<div class="tie-pattern"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-briefcase">
|
||||||
|
<div class="briefcase-lock"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-chains">
|
||||||
|
<div class="chain-link"></div>
|
||||||
|
<div class="chain-link"></div>
|
||||||
|
<div class="chain-link"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Other AI Assistants</h3>
|
||||||
|
<p>Subscription-based, cloud-only solutions</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="side-features">
|
||||||
|
<div class="feature-item limitation">
|
||||||
|
<div class="feature-icon wrapper"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>API Wrappers</h4>
|
||||||
|
<p>Just interfaces around Claude/GPT models</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item limitation">
|
||||||
|
<div class="feature-icon cloud-only"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>Cloud Only</h4>
|
||||||
|
<p>Your data travels to their servers</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item limitation">
|
||||||
|
<div class="feature-icon subscription"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>Subscription Forever</h4>
|
||||||
|
<p>Monthly fees that never end</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item limitation">
|
||||||
|
<div class="feature-icon control"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>Their Rules</h4>
|
||||||
|
<p>Limited by their policies and restrictions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- VS Divider -->
|
||||||
|
<div class="vs-divider">
|
||||||
|
<div class="vs-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye vs-eye"></div>
|
||||||
|
<div class="robot-eye vs-eye"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="vs-text">VS</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-lightning">
|
||||||
|
<div class="lightning-bolt"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Jan -->
|
||||||
|
<div class="comparison-side jan-side">
|
||||||
|
<div class="side-header">
|
||||||
|
<div class="side-robot jan-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye friendly"></div>
|
||||||
|
<div class="robot-eye friendly"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-heart">
|
||||||
|
<div class="heart-beat"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-shield">
|
||||||
|
<div class="shield-lock"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-freedom">
|
||||||
|
<div class="freedom-wings">
|
||||||
|
<div class="wing left-wing"></div>
|
||||||
|
<div class="wing right-wing"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Jan</h3>
|
||||||
|
<p>Open, self-hostable, privacy-first AI</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="side-features">
|
||||||
|
<div class="feature-item advantage">
|
||||||
|
<div class="feature-icon own-models"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>Our Own Models</h4>
|
||||||
|
<p>Purpose-built, optimized for your needs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item advantage">
|
||||||
|
<div class="feature-icon privacy-first"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>Your Data Stays Yours</h4>
|
||||||
|
<p>Local processing, complete privacy</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item advantage">
|
||||||
|
<div class="feature-icon free-local"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>Free Locally</h4>
|
||||||
|
<p>No subscriptions for local usage</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item advantage">
|
||||||
|
<div class="feature-icon your-rules"></div>
|
||||||
|
<div class="feature-content">
|
||||||
|
<h4>Your Rules</h4>
|
||||||
|
<p>Self-host and control everything</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Detailed Comparison Table -->
|
||||||
|
<div class="detailed-comparison">
|
||||||
|
<h3>Feature Comparison</h3>
|
||||||
|
<div class="comparison-table">
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="header-cell feature-col">Feature</div>
|
||||||
|
<div class="header-cell other-col">Other AI Assistants</div>
|
||||||
|
<div class="header-cell jan-col">Jan</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row models-row">
|
||||||
|
<div class="table-cell feature-col">
|
||||||
|
<div class="feature-robot models-feature">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body"></div>
|
||||||
|
</div>
|
||||||
|
<span>Models</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell other-col">
|
||||||
|
<div class="limitation-indicator">Wrapper around Claude/GPT</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell jan-col">
|
||||||
|
<div class="advantage-indicator">Our own models + others</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row privacy-row">
|
||||||
|
<div class="table-cell feature-col">
|
||||||
|
<div class="feature-robot privacy-feature">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body"></div>
|
||||||
|
</div>
|
||||||
|
<span>Privacy</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell other-col">
|
||||||
|
<div class="limitation-indicator">Your data on their servers</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell jan-col">
|
||||||
|
<div class="advantage-indicator">Your data stays yours</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row deployment-row">
|
||||||
|
<div class="table-cell feature-col">
|
||||||
|
<div class="feature-robot deployment-feature">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body"></div>
|
||||||
|
</div>
|
||||||
|
<span>Deployment</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell other-col">
|
||||||
|
<div class="limitation-indicator">Cloud only</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell jan-col">
|
||||||
|
<div class="advantage-indicator">Local, self-hosted, or cloud</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row cost-row">
|
||||||
|
<div class="table-cell feature-col">
|
||||||
|
<div class="feature-robot cost-feature">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body"></div>
|
||||||
|
</div>
|
||||||
|
<span>Cost</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell other-col">
|
||||||
|
<div class="limitation-indicator">Subscription forever</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell jan-col">
|
||||||
|
<div class="advantage-indicator">Free locally, pay for cloud</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-row control-row">
|
||||||
|
<div class="table-cell feature-col">
|
||||||
|
<div class="feature-robot control-feature">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body"></div>
|
||||||
|
</div>
|
||||||
|
<span>Control</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell other-col">
|
||||||
|
<div class="limitation-indicator">Their rules, their limits</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell jan-col">
|
||||||
|
<div class="advantage-indicator">Your infrastructure, your rules</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Philosophy Cards -->
|
||||||
|
<div class="philosophy-cards">
|
||||||
|
<h3>Our Philosophy</h3>
|
||||||
|
<div class="cards-grid">
|
||||||
|
<div class="philosophy-card models-card">
|
||||||
|
<div class="card-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-brain">
|
||||||
|
<div class="brain-core"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="model-display">
|
||||||
|
<div class="model-layer"></div>
|
||||||
|
<div class="model-layer"></div>
|
||||||
|
<div class="model-layer"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-icon our-models"></div>
|
||||||
|
<h4>Our Models</h4>
|
||||||
|
<p>Trained by us, optimized for your use cases, not subscription revenue. Real AI, not API wrappers.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="philosophy-card infrastructure-card">
|
||||||
|
<div class="card-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-home">
|
||||||
|
<div class="home-roof"></div>
|
||||||
|
<div class="home-door"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="infrastructure-display">
|
||||||
|
<div class="server-rack"></div>
|
||||||
|
<div class="connection-lines">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-icon your-infrastructure"></div>
|
||||||
|
<h4>Your Infrastructure</h4>
|
||||||
|
<p>Run locally for privacy, or cloud when you need power. You choose where your data lives.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="philosophy-card tools-card">
|
||||||
|
<div class="card-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
<div class="robot-eye"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-tools-display">
|
||||||
|
<div class="tool-wrench"></div>
|
||||||
|
<div class="tool-gear"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="automation-display">
|
||||||
|
<div class="automation-flow">
|
||||||
|
<div class="flow-dot"></div>
|
||||||
|
<div class="flow-dot"></div>
|
||||||
|
<div class="flow-dot"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-icon real-tools"></div>
|
||||||
|
<h4>Real Tools</h4>
|
||||||
|
<p>Not just chat, but automation that actually gets things done. Integrated, not bolted-on.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Call to Action -->
|
||||||
|
<div class="principles-cta">
|
||||||
|
<div class="cta-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye confident"></div>
|
||||||
|
<div class="robot-eye confident"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-confident-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-badge">
|
||||||
|
<span>Open AI</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-cape">
|
||||||
|
<div class="cape-flow"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cta-content">
|
||||||
|
<h3>Ready for AI that respects your choices?</h3>
|
||||||
|
<p>Run it locally for privacy, connect to cloud for power, or self-host for both.</p>
|
||||||
|
<div class="cta-buttons">
|
||||||
|
<a href="#" class="btn-primary">Download Jan Desktop</a>
|
||||||
|
<a href="#" class="btn-secondary">Try jan.ai Beta</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import '/src/styles/products-principles.css';
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Comparison robot animations
|
||||||
|
const comparisonRobots = document.querySelectorAll('.side-robot, .vs-robot');
|
||||||
|
|
||||||
|
comparisonRobots.forEach(robot => {
|
||||||
|
robot.addEventListener('mouseenter', () => {
|
||||||
|
if (robot.classList.contains('other-robot')) {
|
||||||
|
robot.style.animation = 'corporateShake 0.8s ease-in-out';
|
||||||
|
} else if (robot.classList.contains('jan-robot')) {
|
||||||
|
robot.style.animation = 'friendlyBounce 0.8s ease-in-out';
|
||||||
|
} else if (robot.classList.contains('vs-robot')) {
|
||||||
|
robot.style.animation = 'vsFlash 0.6s ease-in-out';
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
robot.style.animation = '';
|
||||||
|
}, 800);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Table row interactions
|
||||||
|
const tableRows = document.querySelectorAll('.table-row');
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
row.addEventListener('mouseenter', () => {
|
||||||
|
// Highlight the entire row
|
||||||
|
const cells = row.querySelectorAll('.table-cell');
|
||||||
|
cells.forEach(cell => {
|
||||||
|
if (cell.classList.contains('jan-col')) {
|
||||||
|
cell.style.background = 'var(--soft-green)';
|
||||||
|
} else if (cell.classList.contains('other-col')) {
|
||||||
|
cell.style.background = 'var(--warm-yellow)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animate the feature robot
|
||||||
|
const featureRobot = row.querySelector('.feature-robot');
|
||||||
|
if (featureRobot) {
|
||||||
|
featureRobot.style.animation = 'featureBounce 0.4s ease-in-out';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
row.addEventListener('mouseleave', () => {
|
||||||
|
const cells = row.querySelectorAll('.table-cell');
|
||||||
|
cells.forEach(cell => {
|
||||||
|
cell.style.background = 'white';
|
||||||
|
});
|
||||||
|
|
||||||
|
const featureRobot = row.querySelector('.feature-robot');
|
||||||
|
if (featureRobot) {
|
||||||
|
featureRobot.style.animation = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Philosophy cards hover effects
|
||||||
|
const philosophyCards = document.querySelectorAll('.philosophy-card');
|
||||||
|
philosophyCards.forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', () => {
|
||||||
|
const cardRobot = card.querySelector('.card-robot');
|
||||||
|
if (cardRobot) {
|
||||||
|
cardRobot.style.animation = 'cardRobotFloat 0.8s ease-in-out';
|
||||||
|
}
|
||||||
|
|
||||||
|
card.style.transform = 'translateY(-8px) scale(1.02)';
|
||||||
|
});
|
||||||
|
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
const cardRobot = card.querySelector('.card-robot');
|
||||||
|
if (cardRobot) {
|
||||||
|
cardRobot.style.animation = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
card.style.transform = 'translateY(0) scale(1)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll-triggered animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.2,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
if (entry.target.classList.contains('main-comparison')) {
|
||||||
|
// Animate comparison sides
|
||||||
|
const sides = entry.target.querySelectorAll('.comparison-side');
|
||||||
|
sides.forEach((side, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
side.style.animation = 'slideInComparison 0.8s ease-out forwards';
|
||||||
|
}, index * 200);
|
||||||
|
});
|
||||||
|
} else if (entry.target.classList.contains('philosophy-cards')) {
|
||||||
|
// Animate philosophy cards
|
||||||
|
const cards = entry.target.querySelectorAll('.philosophy-card');
|
||||||
|
cards.forEach((card, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
card.style.animation = 'fadeInUp 0.6s ease-out forwards';
|
||||||
|
}, index * 150);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe key sections
|
||||||
|
const mainComparison = document.querySelector('.main-comparison');
|
||||||
|
const philosophyCardsContainer = document.querySelector('.philosophy-cards');
|
||||||
|
|
||||||
|
if (mainComparison) observer.observe(mainComparison);
|
||||||
|
if (philosophyCardsContainer) observer.observe(philosophyCardsContainer);
|
||||||
|
|
||||||
|
// CTA robot interaction
|
||||||
|
const ctaRobot = document.querySelector('.cta-robot');
|
||||||
|
if (ctaRobot) {
|
||||||
|
ctaRobot.addEventListener('click', () => {
|
||||||
|
ctaRobot.style.animation = 'ctaRobotCelebrate 1s ease-in-out';
|
||||||
|
setTimeout(() => {
|
||||||
|
ctaRobot.style.animation = '';
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Advantage/limitation indicators animation
|
||||||
|
const indicators = document.querySelectorAll('.advantage-indicator, .limitation-indicator');
|
||||||
|
indicators.forEach(indicator => {
|
||||||
|
indicator.addEventListener('mouseenter', () => {
|
||||||
|
if (indicator.classList.contains('advantage-indicator')) {
|
||||||
|
indicator.style.animation = 'advantagePulse 0.4s ease-in-out';
|
||||||
|
} else {
|
||||||
|
indicator.style.animation = 'limitationShake 0.4s ease-in-out';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
indicator.addEventListener('mouseleave', () => {
|
||||||
|
indicator.style.animation = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
763
website/src/components/products/ProductsRoadmap.astro
Normal file
763
website/src/components/products/ProductsRoadmap.astro
Normal file
@ -0,0 +1,763 @@
|
|||||||
|
---
|
||||||
|
// ProductsRoadmap.astro - Interactive release roadmap database
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="roadmap" class="products-section roadmap-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-badge">
|
||||||
|
<div class="badge-robot">
|
||||||
|
<div class="badge-robot-head"></div>
|
||||||
|
<div class="badge-robot-body">Map</div>
|
||||||
|
</div>
|
||||||
|
<span>Release Roadmap</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">Development Timeline</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Detailed roadmap with release versions, target dates, and comprehensive feature breakdowns.
|
||||||
|
Track our progress as we build the future of AI.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Roadmap Overview -->
|
||||||
|
<div class="roadmap-overview">
|
||||||
|
<div class="timeline-stats">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-robot released-robot">
|
||||||
|
<div class="robot-head"></div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="success-check"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-number">3</div>
|
||||||
|
<div class="stat-label">Released</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-robot development-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye working"></div>
|
||||||
|
<div class="robot-eye working"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="work-indicator">
|
||||||
|
<div class="work-dot"></div>
|
||||||
|
<div class="work-dot"></div>
|
||||||
|
<div class="work-dot"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-number">2</div>
|
||||||
|
<div class="stat-label">In Development</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-robot planned-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye planning"></div>
|
||||||
|
<div class="robot-eye planning"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="planning-board">
|
||||||
|
<div class="plan-item"></div>
|
||||||
|
<div class="plan-item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-number">4</div>
|
||||||
|
<div class="stat-label">Planned</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Interactive Roadmap Database -->
|
||||||
|
<div class="roadmap-database">
|
||||||
|
<div class="database-header">
|
||||||
|
<div class="database-title">
|
||||||
|
<div class="title-robot">
|
||||||
|
<div class="robot-head"></div>
|
||||||
|
<div class="robot-body">DB</div>
|
||||||
|
</div>
|
||||||
|
<h3>Release Database</h3>
|
||||||
|
</div>
|
||||||
|
<div class="database-controls">
|
||||||
|
<button class="control-btn expand-all" data-action="expand-all">
|
||||||
|
<span>Expand All</span>
|
||||||
|
</button>
|
||||||
|
<button class="control-btn collapse-all" data-action="collapse-all">
|
||||||
|
<span>Collapse All</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="database-table">
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="header-cell version-col">Release Version</div>
|
||||||
|
<div class="header-cell date-col">Target Date</div>
|
||||||
|
<div class="header-cell status-col">Status</div>
|
||||||
|
<div class="header-cell expand-col">Details</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Released Versions -->
|
||||||
|
<div class="roadmap-row released" data-version="v0.6.7">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot released-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">✓</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v0.6.7</div>
|
||||||
|
<div class="version-name">Web Search</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge released">Released</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator released">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Live</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>User Stories</h4>
|
||||||
|
<ul>
|
||||||
|
<li>As a user, I want to search the web directly from Jan chat for real-time information</li>
|
||||||
|
<li>As a developer, I want better API documentation for integration</li>
|
||||||
|
<li>As a researcher, I want source attribution for all search results</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>New Features</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Privacy-respecting web search integration</li>
|
||||||
|
<li>Multiple search engine support</li>
|
||||||
|
<li>Improved model downloading experience</li>
|
||||||
|
<li>Enhanced error handling and user feedback</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Documentation</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Web Search API documentation</li>
|
||||||
|
<li>Privacy policy updates</li>
|
||||||
|
<li>Search configuration guide</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="roadmap-row released" data-version="v0.6.5">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot released-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">✓</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v0.6.5</div>
|
||||||
|
<div class="version-name">Desktop Stability</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge released">Released</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator released">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Live</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Improvements</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Enhanced memory management for large models</li>
|
||||||
|
<li>Improved GPU utilization</li>
|
||||||
|
<li>Better cross-platform compatibility</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Bug Fixes</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Fixed model loading crashes on Windows</li>
|
||||||
|
<li>Resolved memory leaks in long conversations</li>
|
||||||
|
<li>Fixed UI freezing during model downloads</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- In Development -->
|
||||||
|
<div class="roadmap-row development" data-version="v0.7.0">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot development-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">⚡</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v0.7.0</div>
|
||||||
|
<div class="version-name">Deep Research</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge development">January 2025</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator development">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Building</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>User Stories</h4>
|
||||||
|
<ul>
|
||||||
|
<li>As a researcher, I want to conduct deep research with multiple sources and citations</li>
|
||||||
|
<li>As a user, I want Jan Nano to work seamlessly on mobile devices</li>
|
||||||
|
<li>As a team lead, I want to preview jan.ai for my organization</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>New Features</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Deep research capabilities with multi-source analysis</li>
|
||||||
|
<li>jan.ai web platform beta launch</li>
|
||||||
|
<li>Improved Jan Nano performance and mobile optimization</li>
|
||||||
|
<li>Citation management and research reports</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Documentation</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Research methodology guide</li>
|
||||||
|
<li>jan.ai platform documentation</li>
|
||||||
|
<li>Mobile optimization best practices</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="roadmap-row development" data-version="v0.8.0">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot development-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">⚡</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v0.8.0</div>
|
||||||
|
<div class="version-name">Browser Automation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge development">March 2025</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator development">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Building</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>User Stories</h4>
|
||||||
|
<ul>
|
||||||
|
<li>As a user, I want Jan to automate web tasks for me safely and efficiently</li>
|
||||||
|
<li>As a business user, I want to automate repetitive web workflows</li>
|
||||||
|
<li>As a developer, I want browser automation APIs for custom integrations</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>New Features</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Browser automation capabilities (Beta)</li>
|
||||||
|
<li>Form filling and data extraction</li>
|
||||||
|
<li>Website navigation and interaction</li>
|
||||||
|
<li>Safety policies and user confirmation flows</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Documentation</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Browser automation safety guide</li>
|
||||||
|
<li>Web scraping best practices</li>
|
||||||
|
<li>API reference for automation tools</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Planned Releases -->
|
||||||
|
<div class="roadmap-row planned" data-version="v0.9.0">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot planned-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">📱</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v0.9.0</div>
|
||||||
|
<div class="version-name">Mobile Launch</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge planned">Q1 2025</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator planned">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Planned</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>User Stories</h4>
|
||||||
|
<ul>
|
||||||
|
<li>As a mobile user, I want Jan AI available on my iOS/Android device</li>
|
||||||
|
<li>As a commuter, I want to seamlessly switch between desktop and mobile</li>
|
||||||
|
<li>As a privacy-conscious user, I want local AI on my phone</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>New Features</h4>
|
||||||
|
<ul>
|
||||||
|
<li>iOS and Android mobile applications</li>
|
||||||
|
<li>Three adaptive modes (Desktop, Server, Local)</li>
|
||||||
|
<li>Voice-first interface</li>
|
||||||
|
<li>Cross-device synchronization</li>
|
||||||
|
<li>Jan Nano on-device processing</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Documentation</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Mobile setup and configuration guide</li>
|
||||||
|
<li>Voice interaction best practices</li>
|
||||||
|
<li>Device syncing tutorial</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="roadmap-row planned" data-version="v1.0.0">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot planned-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">🏢</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v1.0.0</div>
|
||||||
|
<div class="version-name">Server Edition</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge planned">Q2 2025</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator planned">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Planned</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>User Stories</h4>
|
||||||
|
<ul>
|
||||||
|
<li>As an IT admin, I want to deploy Jan for my entire organization</li>
|
||||||
|
<li>As a team lead, I want centralized AI with team collaboration features</li>
|
||||||
|
<li>As a CTO, I want enterprise-grade security and compliance</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>New Features</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Multi-user server deployment</li>
|
||||||
|
<li>Enterprise authentication (SSO, LDAP)</li>
|
||||||
|
<li>Team collaboration and shared conversations</li>
|
||||||
|
<li>Docker and Kubernetes deployment options</li>
|
||||||
|
<li>Admin dashboard and user management</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Documentation</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Enterprise deployment guide</li>
|
||||||
|
<li>Security and compliance documentation</li>
|
||||||
|
<li>Admin management tutorials</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="roadmap-row planned" data-version="v1.1.0">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot planned-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">🤖</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v1.1.0</div>
|
||||||
|
<div class="version-name">AI Agents</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge planned">Q1 2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator planned">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Planned</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>User Stories</h4>
|
||||||
|
<ul>
|
||||||
|
<li>As a user, I want autonomous agents to handle complex multi-step tasks</li>
|
||||||
|
<li>As a business owner, I want AI that can coordinate multiple tools automatically</li>
|
||||||
|
<li>As a power user, I want to create custom agent workflows</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>New Features</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Autonomous AI agents</li>
|
||||||
|
<li>Multi-step task planning and execution</li>
|
||||||
|
<li>Tool orchestration and coordination</li>
|
||||||
|
<li>Goal-oriented intelligent reasoning</li>
|
||||||
|
<li>Custom agent workflow builder</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Documentation</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Agent development guide</li>
|
||||||
|
<li>Workflow automation tutorials</li>
|
||||||
|
<li>Safety and oversight best practices</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="roadmap-row planned" data-version="v1.2.0">
|
||||||
|
<div class="row-main">
|
||||||
|
<div class="row-cell version-col">
|
||||||
|
<div class="version-robot planned-version">
|
||||||
|
<div class="robot-mini-head"></div>
|
||||||
|
<div class="robot-mini-body">👁️</div>
|
||||||
|
</div>
|
||||||
|
<div class="version-info">
|
||||||
|
<div class="version-number">v1.2.0</div>
|
||||||
|
<div class="version-name">Lucy Multimodal</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell date-col">
|
||||||
|
<div class="date-badge planned">Q2 2025</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell status-col">
|
||||||
|
<div class="status-indicator planned">
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span>Planned</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell expand-col">
|
||||||
|
<button class="expand-btn" data-expanded="false">
|
||||||
|
<div class="expand-icon">+</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-details">
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>User Stories</h4>
|
||||||
|
<ul>
|
||||||
|
<li>As a content creator, I want AI that can understand and process images</li>
|
||||||
|
<li>As a researcher, I want to analyze documents with both text and visuals</li>
|
||||||
|
<li>As a designer, I want AI that can help with visual content creation</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>New Features</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Lucy multimodal model release</li>
|
||||||
|
<li>Image understanding and analysis</li>
|
||||||
|
<li>Document processing with OCR</li>
|
||||||
|
<li>Visual reasoning capabilities</li>
|
||||||
|
<li>Audio processing (planned)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-section">
|
||||||
|
<h4>Documentation</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Multimodal AI usage guide</li>
|
||||||
|
<li>Image processing tutorials</li>
|
||||||
|
<li>Visual reasoning examples</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Roadmap CTA -->
|
||||||
|
<div class="roadmap-cta">
|
||||||
|
<div class="cta-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-eyes">
|
||||||
|
<div class="robot-eye excited"></div>
|
||||||
|
<div class="robot-eye excited"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-smile-big"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="robot-progress-wheel">
|
||||||
|
<div class="progress-segment"></div>
|
||||||
|
<div class="progress-segment"></div>
|
||||||
|
<div class="progress-segment"></div>
|
||||||
|
<div class="progress-segment active"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-arms celebrating">
|
||||||
|
<div class="arm left-celebrate"></div>
|
||||||
|
<div class="arm right-celebrate"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cta-content">
|
||||||
|
<h3>Join Our Journey</h3>
|
||||||
|
<p>Be part of building the future of AI. Download Jan today and help shape our roadmap.</p>
|
||||||
|
<div class="cta-buttons">
|
||||||
|
<a href="#" class="btn-primary">Download Jan Desktop</a>
|
||||||
|
<a href="#" class="btn-secondary">Follow Our Progress</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import '/src/styles/products-roadmap.css';
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Roadmap row expand/collapse functionality
|
||||||
|
const expandButtons = document.querySelectorAll('.expand-btn');
|
||||||
|
const expandAllBtn = document.querySelector('[data-action="expand-all"]');
|
||||||
|
const collapseAllBtn = document.querySelector('[data-action="collapse-all"]');
|
||||||
|
|
||||||
|
expandButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const row = button.closest('.roadmap-row');
|
||||||
|
const details = row.querySelector('.row-details');
|
||||||
|
const icon = button.querySelector('.expand-icon');
|
||||||
|
const isExpanded = button.getAttribute('data-expanded') === 'true';
|
||||||
|
|
||||||
|
if (isExpanded) {
|
||||||
|
// Collapse
|
||||||
|
details.style.maxHeight = '0';
|
||||||
|
details.style.opacity = '0';
|
||||||
|
icon.textContent = '+';
|
||||||
|
icon.style.transform = 'rotate(0deg)';
|
||||||
|
button.setAttribute('data-expanded', 'false');
|
||||||
|
row.classList.remove('expanded');
|
||||||
|
} else {
|
||||||
|
// Expand
|
||||||
|
details.style.maxHeight = details.scrollHeight + 'px';
|
||||||
|
details.style.opacity = '1';
|
||||||
|
icon.textContent = '−';
|
||||||
|
icon.style.transform = 'rotate(180deg)';
|
||||||
|
button.setAttribute('data-expanded', 'true');
|
||||||
|
row.classList.add('expanded');
|
||||||
|
|
||||||
|
// Animate the version robot
|
||||||
|
const versionRobot = row.querySelector('.version-robot');
|
||||||
|
if (versionRobot) {
|
||||||
|
versionRobot.style.animation = 'versionCelebrate 0.6s ease-in-out';
|
||||||
|
setTimeout(() => {
|
||||||
|
versionRobot.style.animation = '';
|
||||||
|
}, 600);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Expand all functionality
|
||||||
|
expandAllBtn?.addEventListener('click', () => {
|
||||||
|
expandButtons.forEach(button => {
|
||||||
|
if (button.getAttribute('data-expanded') === 'false') {
|
||||||
|
button.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Collapse all functionality
|
||||||
|
collapseAllBtn?.addEventListener('click', () => {
|
||||||
|
expandButtons.forEach(button => {
|
||||||
|
if (button.getAttribute('data-expanded') === 'true') {
|
||||||
|
button.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Row hover effects
|
||||||
|
const roadmapRows = document.querySelectorAll('.roadmap-row');
|
||||||
|
roadmapRows.forEach(row => {
|
||||||
|
row.addEventListener('mouseenter', () => {
|
||||||
|
const versionRobot = row.querySelector('.version-robot');
|
||||||
|
if (versionRobot) {
|
||||||
|
versionRobot.style.animation = 'versionHover 0.4s ease-in-out';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
row.addEventListener('mouseleave', () => {
|
||||||
|
const versionRobot = row.querySelector('.version-robot');
|
||||||
|
if (versionRobot && !row.classList.contains('expanded')) {
|
||||||
|
versionRobot.style.animation = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll-triggered animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
if (entry.target.classList.contains('roadmap-row')) {
|
||||||
|
entry.target.style.animation = 'slideInFromLeft 0.6s ease-out forwards';
|
||||||
|
} else if (entry.target.classList.contains('stat-card')) {
|
||||||
|
entry.target.style.animation = 'fadeInUp 0.6s ease-out forwards';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe roadmap rows and stat cards
|
||||||
|
roadmapRows.forEach(row => observer.observe(row));
|
||||||
|
document.querySelectorAll('.stat-card').forEach(card => observer.observe(card));
|
||||||
|
|
||||||
|
// Database controls hover effects
|
||||||
|
const controlBtns = document.querySelectorAll('.control-btn');
|
||||||
|
controlBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('mouseenter', () => {
|
||||||
|
btn.style.transform = 'translateY(-2px) scale(1.05)';
|
||||||
|
});
|
||||||
|
|
||||||
|
btn.addEventListener('mouseleave', () => {
|
||||||
|
btn.style.transform = 'translateY(0) scale(1)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// CTA robot celebration
|
||||||
|
const ctaRobot = document.querySelector('.cta-robot');
|
||||||
|
if (ctaRobot) {
|
||||||
|
ctaRobot.addEventListener('click', () => {
|
||||||
|
ctaRobot.style.animation = 'ctaRobotCelebration 1.2s ease-in-out';
|
||||||
|
setTimeout(() => {
|
||||||
|
ctaRobot.style.animation = '';
|
||||||
|
}, 1200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-expand first row for demo
|
||||||
|
setTimeout(() => {
|
||||||
|
const firstExpandBtn = document.querySelector('.roadmap-row .expand-btn');
|
||||||
|
if (firstExpandBtn && firstExpandBtn.getAttribute('data-expanded') === 'false') {
|
||||||
|
firstExpandBtn.click();
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
// Update timestamp in real-time for current releases
|
||||||
|
const updateTimestamps = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const timeString = now.toLocaleTimeString('en-US', {
|
||||||
|
hour12: false,
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.real-time-stamp').forEach(stamp => {
|
||||||
|
stamp.textContent = timeString;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
updateTimestamps();
|
||||||
|
setInterval(updateTimestamps, 60000); // Update every minute
|
||||||
|
});
|
||||||
|
</script>
|
||||||
628
website/src/components/products/ProductsTOC.astro
Normal file
628
website/src/components/products/ProductsTOC.astro
Normal file
@ -0,0 +1,628 @@
|
|||||||
|
---
|
||||||
|
// ProductsTOC.astro - Sticky table of contents navigation
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="products-toc">
|
||||||
|
<div class="toc-container">
|
||||||
|
<div class="toc-header">
|
||||||
|
<div class="toc-robot">
|
||||||
|
<div class="robot-head"></div>
|
||||||
|
<div class="robot-body">📋</div>
|
||||||
|
</div>
|
||||||
|
<h3>Navigate This Page</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="toc-nav" role="navigation" aria-label="Table of Contents">
|
||||||
|
<ul class="toc-list">
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#hero" class="toc-link" data-section="hero">
|
||||||
|
<div class="toc-icon hero-icon"></div>
|
||||||
|
<span>Product Overview</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#vision" class="toc-link" data-section="vision">
|
||||||
|
<div class="toc-icon vision-icon"></div>
|
||||||
|
<span>Product Vision</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#architecture" class="toc-link" data-section="architecture">
|
||||||
|
<div class="toc-icon architecture-icon"></div>
|
||||||
|
<span>How Jan Works</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#models" class="toc-link" data-section="models">
|
||||||
|
<div class="toc-icon models-icon"></div>
|
||||||
|
<span>AI Models</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#platforms" class="toc-link" data-section="platforms">
|
||||||
|
<div class="toc-icon platforms-icon"></div>
|
||||||
|
<span>Platforms</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#tools" class="toc-link" data-section="tools">
|
||||||
|
<div class="toc-icon tools-icon"></div>
|
||||||
|
<span>Tools</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#principles" class="toc-link" data-section="principles">
|
||||||
|
<div class="toc-icon principles-icon"></div>
|
||||||
|
<span>Why Jan</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="toc-item">
|
||||||
|
<a href="#roadmap" class="toc-link" data-section="roadmap">
|
||||||
|
<div class="toc-icon roadmap-icon"></div>
|
||||||
|
<span>Roadmap</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="toc-progress">
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-text">
|
||||||
|
<span class="current-section">Getting Started</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile TOC Toggle -->
|
||||||
|
<button class="toc-mobile-toggle" aria-label="Toggle Table of Contents">
|
||||||
|
<div class="toggle-icon">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.products-toc {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
right: 2rem;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 2px solid #e2e8f0;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
min-width: 280px;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-robot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-robot .robot-head {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: #3b82f6;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-robot .robot-body {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-header h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e293b;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-nav {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-item {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link:hover {
|
||||||
|
background: #f1f5f9;
|
||||||
|
color: #3b82f6;
|
||||||
|
border-color: #e2e8f0;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link.active {
|
||||||
|
background: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
border-color: #3b82f6;
|
||||||
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link.active .toc-icon {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid #1e293b;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon variations */
|
||||||
|
.hero-icon {
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-icon {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.architecture-icon {
|
||||||
|
background: linear-gradient(135deg, #06b6d4, #0891b2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-icon {
|
||||||
|
background: linear-gradient(135deg, #ec4899, #db2777);
|
||||||
|
}
|
||||||
|
|
||||||
|
.platforms-icon {
|
||||||
|
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-icon {
|
||||||
|
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||||
|
}
|
||||||
|
|
||||||
|
.principles-icon {
|
||||||
|
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-icon {
|
||||||
|
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon symbols */
|
||||||
|
.toc-icon::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-icon::after {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-icon::after {
|
||||||
|
width: 6px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.architecture-icon::after {
|
||||||
|
width: 10px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-icon::after {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platforms-icon::after {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-icon::after {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principles-icon::after {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-icon::after {
|
||||||
|
width: 10px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress section */
|
||||||
|
.toc-progress {
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: #e2e8f0;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 0%;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-section {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile toggle button */
|
||||||
|
.toc-mobile-toggle {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: #3b82f6;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1001;
|
||||||
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-mobile-toggle:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon span {
|
||||||
|
width: 16px;
|
||||||
|
height: 2px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 1px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile states */
|
||||||
|
.products-toc.mobile-hidden .toc-container {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-toc.mobile-visible .toggle-icon span:nth-child(1) {
|
||||||
|
transform: rotate(45deg) translate(6px, 6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-toc.mobile-visible .toggle-icon span:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-toc.mobile-visible .toggle-icon span:nth-child(3) {
|
||||||
|
transform: rotate(-45deg) translate(6px, -6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
.products-toc {
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
min-width: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.products-toc {
|
||||||
|
top: auto;
|
||||||
|
bottom: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
min-width: 240px;
|
||||||
|
max-height: 60vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-mobile-toggle {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-toc:not(.mobile-visible) .toc-container {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.toc-mobile-toggle {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
top: 1.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
min-width: 220px;
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link {
|
||||||
|
padding: 0.65rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.products-toc {
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
min-width: 200px;
|
||||||
|
max-height: 50vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
.toc-container {
|
||||||
|
border-width: 3px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link {
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.toc-link, .toc-container, .progress-fill, .toc-mobile-toggle, .toggle-icon span {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar styling */
|
||||||
|
.toc-container::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container::-webkit-scrollbar-track {
|
||||||
|
background: #f1f5f9;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container::-webkit-scrollbar-thumb {
|
||||||
|
background: #cbd5e1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #94a3b8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const toc = document.querySelector('.products-toc');
|
||||||
|
const tocLinks = document.querySelectorAll('.toc-link');
|
||||||
|
const mobileToggle = document.querySelector('.toc-mobile-toggle');
|
||||||
|
const progressFill = document.querySelector('.progress-fill');
|
||||||
|
const currentSectionText = document.querySelector('.current-section');
|
||||||
|
|
||||||
|
// Mobile toggle functionality
|
||||||
|
if (mobileToggle) {
|
||||||
|
mobileToggle.addEventListener('click', () => {
|
||||||
|
toc?.classList.toggle('mobile-visible');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close TOC when clicking outside on mobile
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (window.innerWidth <= 1024 && toc && !toc.contains(e.target)) {
|
||||||
|
toc.classList.remove('mobile-visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Smooth scrolling for TOC links
|
||||||
|
tocLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = link.getAttribute('href')?.substring(1);
|
||||||
|
const targetElement = document.getElementById(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
const offset = 100; // Account for fixed headers
|
||||||
|
const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
|
||||||
|
const offsetPosition = elementPosition - offset;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close mobile TOC after navigation
|
||||||
|
if (window.innerWidth <= 1024) {
|
||||||
|
toc?.classList.remove('mobile-visible');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scroll progress and active section tracking
|
||||||
|
const sections = Array.from(document.querySelectorAll('[id]')).filter(el =>
|
||||||
|
['hero', 'vision', 'architecture', 'models', 'platforms', 'tools', 'principles', 'roadmap'].includes(el.id)
|
||||||
|
);
|
||||||
|
|
||||||
|
const updateProgress = () => {
|
||||||
|
const scrollTop = window.pageYOffset;
|
||||||
|
const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||||
|
const scrollProgress = Math.min(scrollTop / documentHeight, 1);
|
||||||
|
|
||||||
|
if (progressFill) {
|
||||||
|
progressFill.style.width = `${scrollProgress * 100}%`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateActiveSection = () => {
|
||||||
|
const scrollTop = window.pageYOffset + 150; // Offset for better UX
|
||||||
|
|
||||||
|
let activeSection = sections[0]; // Default to first section
|
||||||
|
|
||||||
|
for (const section of sections) {
|
||||||
|
if (section.offsetTop <= scrollTop) {
|
||||||
|
activeSection = section;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update active TOC link
|
||||||
|
tocLinks.forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
if (link.getAttribute('href') === `#${activeSection.id}`) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update current section text
|
||||||
|
if (currentSectionText) {
|
||||||
|
const sectionNames = {
|
||||||
|
hero: 'Product Overview',
|
||||||
|
vision: 'Product Vision',
|
||||||
|
architecture: 'How Jan Works',
|
||||||
|
models: 'AI Models',
|
||||||
|
platforms: 'Platforms',
|
||||||
|
tools: 'Tools',
|
||||||
|
principles: 'Why Jan',
|
||||||
|
roadmap: 'Roadmap'
|
||||||
|
};
|
||||||
|
currentSectionText.textContent = sectionNames[activeSection.id] || 'Getting Started';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Throttled scroll handler
|
||||||
|
let ticking = false;
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
updateProgress();
|
||||||
|
updateActiveSection();
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
|
||||||
|
// Initial call
|
||||||
|
updateProgress();
|
||||||
|
updateActiveSection();
|
||||||
|
|
||||||
|
// Handle window resize
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
if (window.innerWidth > 1024) {
|
||||||
|
toc?.classList.remove('mobile-visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && toc?.classList.contains('mobile-visible')) {
|
||||||
|
toc.classList.remove('mobile-visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
1150
website/src/components/products/ProductsTools.astro
Normal file
1150
website/src/components/products/ProductsTools.astro
Normal file
File diff suppressed because it is too large
Load Diff
810
website/src/components/products/ProductsVision.astro
Normal file
810
website/src/components/products/ProductsVision.astro
Normal file
@ -0,0 +1,810 @@
|
|||||||
|
---
|
||||||
|
// ProductsVision.astro - Product vision and principles section
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="vision" class="products-section vision-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-badge">
|
||||||
|
<div class="badge-robot">
|
||||||
|
<div class="badge-robot-head"></div>
|
||||||
|
<div class="badge-robot-body">Vision</div>
|
||||||
|
</div>
|
||||||
|
<span>Product Vision</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">What We're Building</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Jan Agent Formula -->
|
||||||
|
<div class="vision-formula">
|
||||||
|
<div class="formula-container">
|
||||||
|
<div class="formula-item">
|
||||||
|
<div class="formula-robot models-robot">
|
||||||
|
<div class="robot-head"></div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="formula-label">Jan Models</div>
|
||||||
|
<div class="formula-desc">Our own AI models optimized for local and private use</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="formula-operator">+</div>
|
||||||
|
|
||||||
|
<div class="formula-item">
|
||||||
|
<div class="formula-robot app-robot">
|
||||||
|
<div class="robot-head"></div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="formula-label">Jan Application</div>
|
||||||
|
<div class="formula-desc">Applications that work across all your devices</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="formula-operator">+</div>
|
||||||
|
|
||||||
|
<div class="formula-item">
|
||||||
|
<div class="formula-robot tools-robot">
|
||||||
|
<div class="robot-head"></div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="formula-label">Jan Tools</div>
|
||||||
|
<div class="formula-desc">Tools that actually get things done</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="formula-equals">=</div>
|
||||||
|
|
||||||
|
<div class="formula-result">
|
||||||
|
<div class="result-robot">
|
||||||
|
<div class="robot-head crown"></div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="result-glow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-cape"></div>
|
||||||
|
</div>
|
||||||
|
<div class="result-label">Jan Agent</div>
|
||||||
|
<div class="result-desc">Complete AI ecosystem that you control</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Two Modes Explanation -->
|
||||||
|
<div class="dual-modes">
|
||||||
|
<div class="modes-header">
|
||||||
|
<h3>Two Modes, One Experience</h3>
|
||||||
|
<p>Users shouldn't need to understand models, APIs, or technical details. Just choose Local for privacy or Cloud for power.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modes-grid">
|
||||||
|
<div class="mode-card local-mode">
|
||||||
|
<div class="mode-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
<div class="robot-lock">
|
||||||
|
<div class="lock-icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mode-content">
|
||||||
|
<h4>Local (Incognito) Mode</h4>
|
||||||
|
<p>Run AI models entirely on your device, giving you complete privacy with no internet required.</p>
|
||||||
|
<div class="mode-features">
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon privacy"></div>
|
||||||
|
<span>Complete privacy</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon offline"></div>
|
||||||
|
<span>No internet required</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon hardware"></div>
|
||||||
|
<span>Your hardware, your data</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon local"></div>
|
||||||
|
<span>Offline capable</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mode-card cloud-mode">
|
||||||
|
<div class="mode-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
</div>
|
||||||
|
<div class="robot-signal">
|
||||||
|
<div class="signal-bars">
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mode-content">
|
||||||
|
<h4>Cloud Mode</h4>
|
||||||
|
<p>Connect to more powerful models when needed - either self-hosted or via jan.ai.</p>
|
||||||
|
<div class="mode-features">
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon power"></div>
|
||||||
|
<span>Powerful models</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon speed"></div>
|
||||||
|
<span>Faster processing</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon selfhost"></div>
|
||||||
|
<span>Self-hosted option</span>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon janai"></div>
|
||||||
|
<span>jan.ai integration</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Product Principles -->
|
||||||
|
<div class="product-principles">
|
||||||
|
<div class="principles-header">
|
||||||
|
<h3>Our Product Principles</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="principles-grid">
|
||||||
|
<div class="principle-card">
|
||||||
|
<div class="principle-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="magic-wand">
|
||||||
|
<div class="wand"></div>
|
||||||
|
<div class="sparkles">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="principle-content">
|
||||||
|
<h4>It Just Works</h4>
|
||||||
|
<div class="principle-steps">
|
||||||
|
<div class="step">1. Open Jan, start chatting.</div>
|
||||||
|
<div class="step">2. Onboarding is fully available but optional.</div>
|
||||||
|
<div class="step">3. Setting up an API key is optional.</div>
|
||||||
|
<div class="step">4. Selecting a local model is optional.</div>
|
||||||
|
</div>
|
||||||
|
<div class="principle-quote">We handle the complexity.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="principle-card">
|
||||||
|
<div class="principle-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="balance-scale">
|
||||||
|
<div class="scale-base"></div>
|
||||||
|
<div class="scale-left">
|
||||||
|
<div class="scale-icon privacy-icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="scale-right">
|
||||||
|
<div class="scale-icon cloud-icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="principle-content">
|
||||||
|
<h4>Privacy First, Cloud When Needed</h4>
|
||||||
|
<p>Start with complete privacy by default. Add cloud capabilities only when you choose to.</p>
|
||||||
|
<div class="principle-benefit">
|
||||||
|
Your choice, your control, your data.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="principle-card">
|
||||||
|
<div class="principle-robot">
|
||||||
|
<div class="robot-head">
|
||||||
|
<div class="robot-smile"></div>
|
||||||
|
</div>
|
||||||
|
<div class="robot-body">
|
||||||
|
<div class="solution-gear">
|
||||||
|
<div class="gear-main">
|
||||||
|
<div class="gear-teeth"></div>
|
||||||
|
</div>
|
||||||
|
<div class="gear-small">
|
||||||
|
<div class="gear-teeth"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="principle-content">
|
||||||
|
<h4>Solve Problems, Not Settings</h4>
|
||||||
|
<p>Users want answers, not configuration options. Power users can dig deeper, but it's never required.</p>
|
||||||
|
<div class="principle-benefit">
|
||||||
|
Focus on what matters: getting things done.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.vision-section {
|
||||||
|
background: var(--cream-white);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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.08);
|
||||||
|
border: 2px solid var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-robot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-robot-head {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: var(--light-purple);
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-robot-body {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vision Formula */
|
||||||
|
.vision-formula {
|
||||||
|
margin: 4rem 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-item, .formula-result {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-robot, .result-robot {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-robot .robot-head, .result-robot .robot-head {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 3px solid var(--dark-text);
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-robot .robot-body, .result-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Robot variations */
|
||||||
|
.models-robot .robot-head { background: var(--soft-pink); }
|
||||||
|
.models-robot .robot-body { background: var(--soft-pink); }
|
||||||
|
|
||||||
|
.app-robot .robot-head { background: var(--soft-green); }
|
||||||
|
.app-robot .robot-body { background: var(--soft-green); }
|
||||||
|
|
||||||
|
.tools-robot .robot-head { background: var(--warm-yellow); }
|
||||||
|
.tools-robot .robot-body { background: var(--warm-yellow); }
|
||||||
|
|
||||||
|
.result-robot .robot-head { background: var(--primary-blue); }
|
||||||
|
.result-robot .robot-body { background: var(--primary-blue); }
|
||||||
|
|
||||||
|
/* Robot details */
|
||||||
|
.robot-screen {
|
||||||
|
width: 30px;
|
||||||
|
height: 20px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--success-green);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot:nth-child(2) { animation-delay: 0.5s; }
|
||||||
|
.dot:nth-child(3) { animation-delay: 1s; }
|
||||||
|
|
||||||
|
.robot-interface {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interface-line {
|
||||||
|
height: 2px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
border-radius: 1px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interface-line.short {
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-tools {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--dark-text);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-glow {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-head.crown::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 10px;
|
||||||
|
background: var(--warning-amber);
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robot-cape {
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: -10px;
|
||||||
|
right: -10px;
|
||||||
|
height: 30px;
|
||||||
|
background: var(--error-red);
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
border-top: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-operator, .formula-equals {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--primary-blue);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--primary-blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-label, .result-label {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-text);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-desc, .result-desc {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--medium-gray);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dual Modes */
|
||||||
|
.dual-modes {
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modes-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modes-header h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-text);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modes-header p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--medium-gray);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modes-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-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;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.local-mode {
|
||||||
|
border-color: var(--success-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.local-mode::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--success-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud-mode {
|
||||||
|
border-color: var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud-mode::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-robot {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-robot .robot-head {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 3px solid var(--dark-text);
|
||||||
|
margin: 0 auto 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.local-mode .robot-head { background: var(--success-green); }
|
||||||
|
.local-mode .robot-body { background: var(--success-green); }
|
||||||
|
|
||||||
|
.cloud-mode .robot-head { background: var(--primary-blue); }
|
||||||
|
.cloud-mode .robot-body { background: var(--primary-blue); }
|
||||||
|
|
||||||
|
.mode-content h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-text);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-content p {
|
||||||
|
color: var(--medium-gray);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-features {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 2px solid var(--dark-text);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon.privacy { background: var(--success-green); }
|
||||||
|
.feature-icon.offline { background: var(--medium-gray); }
|
||||||
|
.feature-icon.hardware { background: var(--warning-amber); }
|
||||||
|
.feature-icon.local { background: var(--light-purple); }
|
||||||
|
.feature-icon.power { background: var(--primary-blue); }
|
||||||
|
.feature-icon.speed { background: var(--error-red); }
|
||||||
|
.feature-icon.selfhost { background: var(--success-green); }
|
||||||
|
.feature-icon.janai { background: var(--primary-blue); }
|
||||||
|
|
||||||
|
/* Product Principles */
|
||||||
|
.product-principles {
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principles-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principles-header h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.principles-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
||||||
|
border-color: var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-robot {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-robot .robot-head {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: var(--warm-yellow);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 3px solid var(--dark-text);
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-robot .robot-body {
|
||||||
|
width: 60px;
|
||||||
|
height: 70px;
|
||||||
|
background: var(--gentle-orange);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 3px solid var(--dark-text);
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-content h4 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-text);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-content p {
|
||||||
|
color: var(--medium-gray);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-steps {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--dark-text);
|
||||||
|
padding-left: 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--primary-blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-quote, .principle-benefit {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--primary-blue);
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--light-blue);
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 4px solid var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.formula-container {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modes-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.vision-formula {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-container {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-operator, .formula-equals {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modes-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principles-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.principle-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.vision-formula {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-card, .principle-card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.dot, .result-glow, .principle-card, .mode-card {
|
||||||
|
animation: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
697
website/src/scripts/robot-interactions.js
Normal file
697
website/src/scripts/robot-interactions.js
Normal file
@ -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 = `
|
||||||
|
<span>${message}</span>
|
||||||
|
<div class="bubble-tail"></div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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 = `
|
||||||
|
<div class="think-bubble small"></div>
|
||||||
|
<div class="think-bubble medium"></div>
|
||||||
|
<div class="think-bubble large">💭</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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 = `
|
||||||
|
<div class="disco-ball">🪩</div>
|
||||||
|
<div class="light-beam red"></div>
|
||||||
|
<div class="light-beam blue"></div>
|
||||||
|
<div class="light-beam green"></div>
|
||||||
|
<div class="light-beam yellow"></div>
|
||||||
|
`;
|
||||||
|
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);
|
||||||
667
website/src/styles/hand-drawn.css
Normal file
667
website/src/styles/hand-drawn.css
Normal file
@ -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,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence baseFrequency="0.95" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.02"/></svg>');
|
||||||
|
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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 20"><path d="M0,10 Q20,5 40,10 T80,10 T120,10 T160,10 T200,10" stroke="%23333" stroke-width="2" fill="none"/></svg>') 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10,50 Q30,20 50,50 T90,50" stroke="%23333" stroke-width="0.5" fill="none" opacity="0.1"/><path d="M20,30 Q40,60 60,30 T80,30" stroke="%23333" stroke-width="0.5" fill="none" opacity="0.1"/></svg>') 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
577
website/src/styles/products-architecture.css
Normal file
577
website/src/styles/products-architecture.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
758
website/src/styles/products-models.css
Normal file
758
website/src/styles/products-models.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
1009
website/src/styles/products-platforms.css
Normal file
1009
website/src/styles/products-platforms.css
Normal file
File diff suppressed because it is too large
Load Diff
1303
website/src/styles/products-principles.css
Normal file
1303
website/src/styles/products-principles.css
Normal file
File diff suppressed because it is too large
Load Diff
837
website/src/styles/products-roadmap.css
Normal file
837
website/src/styles/products-roadmap.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
597
website/src/styles/products-tools.css
Normal file
597
website/src/styles/products-tools.css
Normal file
@ -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; }
|
||||||
|
}
|
||||||
1644
website/src/styles/products.css
Normal file
1644
website/src/styles/products.css
Normal file
File diff suppressed because it is too large
Load Diff
393
website/src/styles/robot-personalities.css
Normal file
393
website/src/styles/robot-personalities.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user