diff --git a/src/khoj/interface/web/home/css/styles.css b/src/khoj/interface/web/home/css/styles.css new file mode 100644 index 00000000..9d4d9824 --- /dev/null +++ b/src/khoj/interface/web/home/css/styles.css @@ -0,0 +1,1210 @@ +/* + * Khoj App Website Styles + * Uses shared design tokens for brand consistency with khoj.dev + */ + +/* ============================================= + * APP-SPECIFIC LAYOUT EXTENSIONS + * ============================================= */ + +:root { + --max-width-app: 1200px; +} + +/* ============================================= + * CSS RESET & BASE + * ============================================= */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-body); + background-color: var(--color-bg); + color: var(--color-text); + line-height: var(--leading-normal); + -webkit-font-smoothing: antialiased; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + max-width: 100%; + height: auto; +} + +/* ============================================= + * NAVIGATION + * ============================================= */ + +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + padding: var(--space-4) var(--space-10); + background: transparent; + transition: background var(--transition-normal), border var(--transition-normal); +} + +.navbar.scrolled { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--color-border); +} + + +.nav-container { + max-width: var(--max-width-app); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo { + display: flex; + align-items: center; +} + +.logo-img { + height: 32px; + width: auto; +} + +.nav-links { + display: flex; + gap: var(--space-8); +} + +.nav-link { + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text-nav); + transition: color var(--transition-fast); +} + +.nav-link:hover { + color: var(--color-link-hover); +} + +.nav-cta { + background: var(--color-text); + color: var(--color-bg); + padding: var(--space-2) var(--space-5); + border-radius: var(--radius-full); + font-family: var(--font-heading); + font-size: var(--text-sm); + font-weight: var(--font-medium); + transition: all var(--transition-fast); +} + +.nav-cta:hover { + opacity: 0.85; +} + +/* ============================================= + * HERO SECTION + * ============================================= */ + +.hero { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: var(--space-20) var(--space-10) var(--space-16); + padding-top: calc(var(--space-20) + 60px); /* Account for fixed navbar */ + max-width: var(--max-width-app); + margin: 0 auto; +} + +.hero-title { + font-family: var(--font-heading); + font-size: var(--text-4xl); + font-weight: var(--font-normal); + letter-spacing: var(--tracking-wide); + line-height: var(--leading-tight); + margin-bottom: var(--space-6); + color: var(--color-text); +} + +.hero-cta { + display: inline-block; + background: var(--color-text); + color: var(--color-bg); + padding: var(--space-3) var(--space-7); + border-radius: var(--radius-full); + font-family: var(--font-heading); + font-size: var(--text-base); + font-weight: var(--font-medium); + border: 1px solid var(--color-text); + margin-bottom: var(--space-5); + transition: all var(--transition-fast); +} + +.hero-cta:hover { + background: transparent; + color: var(--color-text); +} + +.hero-subtitle { + font-family: var(--font-body); + font-size: var(--text-lg); + color: var(--color-text-muted); + margin-bottom: var(--space-16); +} + +.hero-image { + max-width: 100%; + width: 100%; + height: auto; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + background-color: #eee; +} + +/* ============================================= + * FEATURE CARDS + * ============================================= */ + +.features { + max-width: var(--max-width-app); + margin: 0 auto; + padding: var(--space-10); + display: flex; + flex-direction: column; + gap: var(--space-6); +} + +.feature-card { + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-12); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-10); + align-items: center; + transition: box-shadow var(--transition-normal); +} + +.feature-card:hover { + box-shadow: var(--shadow-md); +} + +/* All cards use neutral background */ +.feature-card.personal, +.feature-card.autonomous, +.feature-card.research, +.feature-card.transparent { + background: var(--color-bg); +} + +.feature-content { + display: flex; + flex-direction: column; +} + +.feature-title { + font-family: var(--font-heading); + font-size: var(--text-2xl); + font-weight: var(--font-normal); + letter-spacing: var(--tracking-wide); + margin-bottom: var(--space-4); + color: var(--color-text); +} + +.feature-description { + font-family: var(--font-body); + font-size: var(--text-base); + color: var(--color-text-muted); + margin-bottom: var(--space-6); + line-height: var(--leading-normal); +} + +.feature-tags { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-3); + margin-bottom: var(--space-6); +} + +.tag { + padding: var(--space-2) var(--space-4); + background: var(--color-badge-bg); + border-radius: var(--radius-full); + font-family: var(--font-heading); + font-size: var(--text-xs); + font-weight: var(--font-medium); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-badge-text); +} + +/* Remove highlight variant - all tags same style */ +.tag.highlight { + background: var(--color-badge-bg); + color: var(--color-badge-text); +} + +.feature-link { + font-family: var(--font-heading); + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--color-text); + transition: color var(--transition-fast); +} + +.feature-link:hover { + color: var(--color-link-hover); + text-decoration: underline; +} + +/* ============================================= + * FEATURE VISUALS + * ============================================= */ + +.feature-visual { + display: flex; + align-items: center; + justify-content: center; +} + +.agents-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-3); + background: var(--color-badge-bg); + padding: var(--space-5); + border-radius: var(--radius-md); + border: 1px solid var(--color-border); +} + +.agent-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-sm); + font-family: var(--font-body); + font-size: var(--text-sm); + background: var(--color-bg); + border: 1px solid var(--color-border); + transition: background var(--transition-fast); +} + +.agent-item.active { + background: var(--color-badge-bg); + border-color: var(--color-separator); +} + +.agent-item.active .agent-icon svg { + color: var(--color-text); +} + +.agent-item:hover { + background: var(--color-badge-bg); +} + +.agent-icon { + display: flex; + align-items: center; + justify-content: center; +} + +.agent-icon svg { + width: 16px; + height: 16px; +} + +/* Agent icon colors */ +.agent-icon.code svg { color: var(--color-accent-blue); } +.agent-icon.health svg { color: var(--color-accent-red); } +.agent-icon.teacher svg { color: var(--color-accent-purple); } +.agent-icon.finance svg { color: var(--color-accent-green); } + +/* Personalize Stack - Agents + Models */ +.personalize-stack { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.powered-by-label { + font-family: var(--font-heading); + font-size: var(--text-xs); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + text-align: center; +} + +.models-strip { + display: flex; + justify-content: center; + gap: var(--space-4); + padding: var(--space-3); + background: var(--color-badge-bg); + border-radius: var(--radius-md); + border: 1px solid var(--color-border); +} + +.model-icon { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.7; + transition: opacity var(--transition-fast), transform var(--transition-fast); +} + +.model-icon:hover { + opacity: 1; + transform: scale(1.1); +} + +.model-icon svg { + width: 20px; + height: 20px; +} + +.model-icon.anthropic svg { + width: 26px; + height: 26px; +} + +.model-icon.deepseek svg { + width: 32px; + height: 32px; +} + +.automation-demo { + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-6); + box-shadow: var(--shadow-sm); + max-width: 400px; +} + +.demo-title { + font-family: var(--font-heading); + font-size: var(--text-base); + font-weight: var(--font-medium); + margin-bottom: var(--space-2); + color: var(--color-text); +} + +.demo-desc { + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text-muted); + margin-bottom: var(--space-6); + line-height: var(--leading-normal); +} + +.demo-pills { + display: flex; + flex-wrap: wrap; + gap: var(--space-3); + margin-bottom: var(--space-3); +} + +.demo-pill { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-1); + border-radius: var(--radius-full); + font-family: var(--font-body); + font-size: var(--text-sm); + border: 1px solid var(--color-border); + background: var(--color-bg); +} + +.pill-icon { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.demo-pill.email .pill-icon { color: var(--color-accent-orange); } +.demo-pill.location .pill-icon { color: var(--color-accent-purple); } +.demo-pill.timezone .pill-icon { color: var(--color-accent-green); } +.demo-pill.time .pill-icon { color: var(--color-accent-blue); } +.demo-pill.frequency .pill-icon { color: var(--color-accent-red); } + +.demo-pill .muted { + color: var(--color-text-muted); +} + +.capability-icons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-3); + max-width: 280px; +} + +.cap-icon { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text); +} + +.cap-icon svg { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +/* Capability icon colors */ +.cap-icon.voice svg { color: var(--color-accent-purple); } +.cap-icon.globe svg { color: var(--color-accent-blue); } +.cap-icon.document svg { color: var(--color-accent-orange); } +.cap-icon.image svg { color: var(--color-accent-green); } + +.thinking-steps { + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-5); + box-shadow: var(--shadow-sm); + max-width: 400px; +} + +.step { + display: flex; + gap: var(--space-3); + padding: var(--space-3) 0; +} + +.step:last-child { + padding-bottom: 0; +} + +.step:first-child { + padding-top: 0; +} + +.step-icon { + width: 20px; + height: 20px; + flex-shrink: 0; + color: #7c5cba; +} + +.step-content { + flex: 1; +} + +.step-title { + font-family: var(--font-heading); + font-weight: var(--font-normal); + font-size: var(--text-sm); + display: block; + margin-bottom: var(--space-1); + color: var(--color-text); +} + +.step-desc { + font-family: var(--font-body); + font-size: var(--text-xs); + color: var(--color-text-muted); + line-height: var(--leading-normal); +} + +/* ============================================= + * LAUNCH SECTION + * ============================================= */ + +.launch-section { + text-align: center; + padding: var(--space-20) var(--space-10); +} + +.launch-btn { + display: inline-block; + background: var(--color-text); + color: var(--color-bg); + padding: var(--space-4) var(--space-8); + border-radius: var(--radius-full); + font-family: var(--font-heading); + font-size: var(--text-base); + font-weight: var(--font-medium); + border: 1px solid var(--color-text); + transition: all var(--transition-fast); +} + +.launch-btn:hover { + background: transparent; + color: var(--color-text); +} + +/* ============================================= + * DOWNLOADS SECTION + * ============================================= */ + +.downloads { + max-width: var(--max-width-app); + margin: 0 auto; + padding: var(--space-20) var(--space-10); +} + +.downloads-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-12); +} + +.downloads-label { + display: inline-block; + background: var(--color-badge-bg); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-full); + font-family: var(--font-heading); + font-size: var(--text-xs); + font-weight: var(--font-medium); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-badge-text); +} + +.downloads-tabs { + display: flex; + gap: var(--space-8); +} + +.tab-btn { + background: transparent; + border: none; + padding: var(--space-3) 0; + font-family: var(--font-body); + font-size: var(--text-sm); + cursor: pointer; + position: relative; + color: var(--color-text-muted); + transition: color var(--transition-fast); +} + +.tab-btn:hover { + color: var(--color-text); +} + +.tab-btn.active { + color: var(--color-text); +} + +.tab-btn::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: var(--color-border); +} + +.tab-btn.active::after { + background: var(--color-text); +} + +.downloads-content { + width: 100%; +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +.download-info { + text-align: center; + padding: var(--space-12) var(--space-8); +} + +.download-title { + font-family: var(--font-heading); + font-size: var(--text-2xl); + font-weight: var(--font-normal); + margin-bottom: var(--space-4); + color: var(--color-text); +} + +.download-desc { + font-family: var(--font-body); + font-size: var(--text-base); + color: var(--color-text-muted); + margin-bottom: var(--space-8); + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +.download-options { + display: flex; + gap: var(--space-4); + justify-content: center; + flex-wrap: wrap; +} + +.download-btn { + display: inline-block; + background: var(--color-text); + color: var(--color-bg); + padding: var(--space-3) var(--space-6); + border-radius: var(--radius-full); + font-family: var(--font-heading); + font-size: var(--text-sm); + font-weight: var(--font-medium); + transition: all var(--transition-fast); +} + +.download-btn:hover { + opacity: 0.85; +} + +.download-btn.secondary { + background: var(--color-bg); + color: var(--color-text); + border: 1px solid var(--color-border); +} + +.download-btn.secondary:hover { + background: var(--color-badge-bg); +} + +.content-left { + display: flex; + flex-direction: column; +} + +.content-title { + font-family: var(--font-heading); + font-size: var(--text-3xl); + font-weight: var(--font-normal); + letter-spacing: var(--tracking-wide); + margin-bottom: var(--space-5); + color: var(--color-text); +} + +.content-desc { + font-family: var(--font-body); + font-size: var(--text-base); + color: var(--color-text-muted); + line-height: var(--leading-normal); + margin-bottom: var(--space-6); +} + +.content-btn { + display: inline-block; + align-self: flex-start; + background: var(--color-text); + color: var(--color-bg); + padding: var(--space-3) var(--space-6); + border-radius: var(--radius-full); + font-family: var(--font-heading); + font-size: var(--text-sm); + font-weight: var(--font-medium); + transition: all var(--transition-fast); +} + +.content-btn:hover { + opacity: 0.85; +} + +.content-right { + position: relative; +} + +/* ============================================= + * TAB CONTENT VISUALS + * ============================================= */ + +/* Documents Tab */ +.documents-visual { + display: flex; + flex-direction: column; + gap: var(--space-3); + background: var(--color-badge-bg); + padding: var(--space-6); + border-radius: var(--radius-md); + border: 1px solid var(--color-border); +} + +.doc-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-bg); + border-radius: var(--radius-sm); + border: 1px solid var(--color-border); +} + +.doc-icon { + font-size: var(--text-lg); +} + +.doc-name { + flex: 1; + font-family: var(--font-mono); + font-size: var(--text-sm); + color: var(--color-text); +} + +.doc-status { + font-family: var(--font-heading); + font-size: var(--text-xs); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); +} + +.doc-status.synced { + background: #d4edda; + color: #155724; +} + +.doc-status.syncing { + background: #fff3cd; + color: #856404; +} + + +/* Transparency Tab */ +.transparency-visual { + background: var(--color-badge-bg); + padding: var(--space-6); + border-radius: var(--radius-md); + border: 1px solid var(--color-border); +} + +.code-block { + background: var(--color-code-bg); + padding: var(--space-5); + border-radius: var(--radius-sm); + font-family: var(--font-mono); + font-size: var(--text-sm); + line-height: 1.8; +} + +.code-line { + display: block; +} + +.code-keyword { + color: #d73a49; +} + +.code-func { + color: #6f42c1; +} + +.code-comment { + color: var(--color-text-muted); + font-style: italic; +} + + +/* Depth Tab */ +.depth-visual { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); + background: var(--color-badge-bg); + padding: var(--space-6); + border-radius: var(--radius-md); + border: 1px solid var(--color-border); +} + +.capability-item { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-3); + padding: var(--space-5); + background: var(--color-bg); + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + text-align: center; +} + +.capability-item .cap-icon { + font-size: var(--text-2xl); +} + +.capability-item .cap-label { + font-family: var(--font-heading); + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--color-text); +} + +/* ============================================= + * ACCESS SECTION + * ============================================= */ + +.access-section { + text-align: center; + padding: var(--space-16) var(--space-10); +} + +.access-title { + font-family: var(--font-heading); + font-size: var(--text-2xl); + font-weight: var(--font-normal); + letter-spacing: var(--tracking-wide); + margin-bottom: var(--space-8); + color: var(--color-text); +} + +.access-links { + display: flex; + justify-content: center; + gap: var(--space-6); +} + +.access-card { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-8); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-heading); + font-size: var(--text-base); + font-weight: var(--font-medium); + color: var(--color-text); + transition: all var(--transition-fast); +} + +.access-card:hover { + border-color: var(--color-text); + box-shadow: var(--shadow-sm); +} + +/* Remove platform-specific colors */ +.access-card.whatsapp, +.access-card.obsidian, +.access-card.emacs { + border-color: var(--color-border); + color: var(--color-text); +} + +.access-icon { + font-size: var(--text-xl); +} + +/* ============================================= + * PRICING SECTION + * ============================================= */ + +.pricing { + background: var(--color-badge-bg); + padding: var(--space-20) var(--space-10); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; +} + +.pricing-title { + font-family: var(--font-heading); + font-size: var(--text-3xl); + font-weight: var(--font-normal); + letter-spacing: var(--tracking-wide); + text-align: center; + margin-bottom: var(--space-12); + color: var(--color-text); +} + +.pricing-cards { + display: flex; + justify-content: center; + gap: var(--space-6); + max-width: 800px; + margin: 0 auto; +} + +.pricing-card { + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-8); + flex: 1; + max-width: 350px; + transition: box-shadow var(--transition-fast); +} + +.pricing-card:hover { + box-shadow: var(--shadow-md); +} + +.pricing-card.futurist { + border: 2px solid var(--color-text); +} + +.plan-name { + font-family: var(--font-heading); + font-size: var(--text-lg); + font-weight: var(--font-medium); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-bottom: var(--space-4); + color: var(--color-text); +} + +.plan-price { + margin-bottom: var(--space-6); +} + +.price { + font-family: var(--font-heading); + font-size: var(--text-4xl); + font-weight: var(--font-normal); + color: var(--color-text); +} + +.period { + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text-muted); +} + +.plan-features { + list-style: none; + margin-bottom: var(--space-8); +} + +.plan-features li { + padding: var(--space-2) 0; + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text-muted); +} + +.plan-btn { + display: block; + text-align: center; + padding: var(--space-3) var(--space-6); + border-radius: var(--radius-md); + font-family: var(--font-heading); + font-size: var(--text-sm); + font-weight: var(--font-medium); + transition: all var(--transition-fast); +} + +.plan-btn.outline { + border: 1px solid var(--color-text); + color: var(--color-text); + background: transparent; +} + +.plan-btn.outline:hover { + background: var(--color-text); + color: var(--color-bg); +} + +.plan-btn.filled { + background: var(--color-text); + color: var(--color-bg); + border: 1px solid var(--color-text); +} + +.plan-btn.filled:hover { + background: var(--color-link-hover); + border-color: var(--color-link-hover); +} + +/* ============================================= + * FOOTER + * ============================================= */ + +.footer { + background: var(--color-badge-bg); + padding: var(--space-16) var(--space-10); + border-top: 1px solid var(--color-border); +} + +.footer-container { + max-width: var(--max-width-app); + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.footer-left { + display: flex; + flex-direction: column; +} + +.social-links { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.social-link { + display: flex; + align-items: center; + gap: var(--space-3); + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text-nav); + transition: color var(--transition-fast); +} + +.social-link:hover { + color: var(--color-link-hover); +} + +.social-icon { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.github-stars { + height: 20px; + margin-left: var(--space-2); +} + +.footer-made { + margin-top: var(--space-6); + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text-muted); +} + +.footer-right { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: var(--space-3); +} + +.footer-link { + font-family: var(--font-body); + font-size: var(--text-sm); + color: var(--color-text-nav); + transition: color var(--transition-fast); +} + +.footer-link:hover { + color: var(--color-link-hover); +} + +/* ============================================= + * RESPONSIVE DESIGN + * ============================================= */ + +@media (max-width: 1024px) { + .hero-title { + font-size: var(--text-3xl); + } + + .feature-card { + grid-template-columns: 1fr; + padding: var(--space-8); + } + + /* Reorder feature card elements on mobile: content -> visual -> link */ + .feature-content { + display: contents; + } + + .feature-title { order: 1; } + .feature-description { order: 2; } + .feature-tags { order: 3; } + .feature-visual { + order: 4; + justify-content: flex-start; + } + .feature-link { order: 5; margin-top: var(--space-4); } + + .tab-content.active { + grid-template-columns: 1fr; + } + + .downloads-header { + flex-direction: column; + align-items: flex-start; + gap: var(--space-6); + } +} + +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .hero { + padding: var(--space-16) var(--padding-container-mobile); + padding-top: calc(var(--space-16) + 60px); + } + + .hero-title { + font-size: var(--text-2xl); + } + + .features { + padding: var(--space-6) var(--padding-container-mobile); + } + + .feature-card { + gap: var(--space-4); + } + .agents-grid { + grid-template-columns: 1fr; + } + + .downloads { + padding: var(--space-12) var(--padding-container-mobile); + } + + .downloads-tabs { + justify-content: center; + flex-wrap: wrap; + gap: var(--space-4); + } + + .pricing-cards { + flex-direction: column; + align-items: center; + } + + .access-links { + flex-direction: column; + align-items: center; + } + + .footer-container { + flex-direction: column; + gap: var(--space-8); + } + + .footer-right { + align-items: flex-start; + } +} diff --git a/src/khoj/interface/web/home/favicon.png b/src/khoj/interface/web/home/favicon.png new file mode 100644 index 00000000..de577212 Binary files /dev/null and b/src/khoj/interface/web/home/favicon.png differ diff --git a/src/khoj/interface/web/home/index.html b/src/khoj/interface/web/home/index.html new file mode 100644 index 00000000..3c661b02 --- /dev/null +++ b/src/khoj/interface/web/home/index.html @@ -0,0 +1,415 @@ + + + + + + Khoj AI + + + + + + + + + + + + + +
+

Your AI Research Copilot

+ Start Thinking +

Ask anything, understand documents, create new content

+ + + Khoj AI in action - Research assistant interface +
+ + +
+ +
+
+

Research Deeply

+

Research deeply across your documents and the internet. Generate charts, images and reports.

+
+ Understand any document + Generate images, diagrams, charts + Voice chat +
+ Start Research +
+
+
+
+ + + + Voice +
+
+ + + + Web +
+
+ + + + Docs +
+
+ + + + Images +
+
+
+
+ + +
+
+

Personalize

+

Sync your documents, chat with any AI model and create agents that understand your needs.

+
+ Tune for your needs + Documents stay synced + Chat with GPT, Gemini, Claude, Deepseek +
+ Create Agent +
+
+
+ +
+
+ + + + + + Technical Lead +
+
+ + + + + + Health +
+
+ + + + + + Teacher +
+
+ + + + + + Finance +
+
+ +
Powered by
+ +
+
+ + + +
+
+ + + + +
+
+ + + + + + +
+
+ +
+
+
+
+
+ + +
+
+

Stay Informed

+

Create automations to get tailored research and event based notifications directly in your inbox.

+
+ Custom newsletters + Fresh timely research + Dynamic event based notifications +
+ Create Automation +
+
+
+

Daily summary of AI tech startups

+

Create a summary of yesterday's news in AI tech startups. Do a roundup of movement on incumbent players as well.

+
+ + + + + 9 AM + + + + + + Daily + + +
+
+
+
+ + +
+
+

Trustworthy Answers

+

Know how your AI thinks. Easily trace its reasoning and the sources it read to generate its response.

+
+ Trace Reasoning + Verify References + Open Source +
+ Ask Anything +
+
+
+
+ + + +
+ Understanding Query +

Read my essay about immigration law and suggest three argument improvements

+
+
+
+ + + +
+ Reading Documents +

Immigration_Law.docx

+
+
+
+ + + +
+ Searching the Internet for +

Case law for birthright citizenship

+

United States v. Wong Kim Ark, 169 U.S. 649

+
+
+
+
+
+
+ + +
+
+ Download +
+ + + + +
+
+
+
+
+

Khoj for Windows

+

Keep your documents synced and chat with Khoj from your desktop.

+ Download (x64) +
+
+
+
+

Khoj for Mac

+

Native Mac app to sync documents and access Khoj from your menu bar.

+
+ Apple Silicon + Intel +
+
+
+
+
+

Khoj for Linux

+

Run Khoj natively on your Linux desktop.

+
+ .deb + AppImage +
+
+
+
+
+

Khoj for Android

+

Take Khoj with you on your Android device.

+ Google Play +
+
+
+
+ + +
+

Access Anywhere

+
+ + + + + + + + + + + WhatsApp + + + + + + Obsidian + + + + + + Emacs + +
+
+ + +
+

Pricing

+
+
+

Humanist

+
+ $0 + p/month +
+
    +
  • Chat with free AI models
    • +
  • 10MB data upload
    • +
  • Unlimited conversations
    • +
  • Shareable conversations
    • +
+ Get Started +
+
+

Futurist

+
+ $30 + p/month +
+
    +
  • Chat with any AI model
    • +
  • 500MB data upload
    • +
  • Longer context windows
    • +
  • All of the Humanist plan
    • +
+ Get Started +
+
+
+ + + + + + + diff --git a/src/khoj/interface/web/home/khoj_app_hero_image.avif b/src/khoj/interface/web/home/khoj_app_hero_image.avif new file mode 100644 index 00000000..c244a354 Binary files /dev/null and b/src/khoj/interface/web/home/khoj_app_hero_image.avif differ diff --git a/src/khoj/interface/web/home/script.js b/src/khoj/interface/web/home/script.js new file mode 100644 index 00000000..8c0d9079 --- /dev/null +++ b/src/khoj/interface/web/home/script.js @@ -0,0 +1,52 @@ +// Khoj App Website JavaScript +// Simplified for essential functionality only + +document.addEventListener('DOMContentLoaded', () => { + initNavbar(); + initTabs(); +}); + +// Navbar scroll effect +function initNavbar() { + const navbar = document.querySelector('.navbar'); + if (!navbar) return; + + window.addEventListener('scroll', () => { + navbar.classList.toggle('scrolled', window.scrollY > 50); + }); +} + +// Tab functionality for Advantages section +function initTabs() { + const tabBtns = document.querySelectorAll('.tab-btn'); + const tabContents = document.querySelectorAll('.tab-content'); + + tabBtns.forEach(btn => { + btn.addEventListener('click', () => { + // Remove active class from all buttons + tabBtns.forEach(b => b.classList.remove('active')); + // Add active class to clicked button + btn.classList.add('active'); + + // Show corresponding content + const tabId = btn.dataset.tab; + tabContents.forEach(content => { + content.classList.toggle('active', content.id === tabId); + }); + }); + }); +} + +// Smooth scroll for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); diff --git a/src/khoj/routers/web_client.py b/src/khoj/routers/web_client.py index 2dbadbe1..c4fa0024 100644 --- a/src/khoj/routers/web_client.py +++ b/src/khoj/routers/web_client.py @@ -8,17 +8,23 @@ from starlette.authentication import requires from khoj.database.adapters import get_user_github_config from khoj.routers.helpers import get_next_url, get_user_config -from khoj.utils import constants +from khoj.utils import constants, state from khoj.utils.rawconfig import GithubContentConfig, GithubRepoConfig # Initialize Router web_client = APIRouter() templates = Jinja2Templates([constants.web_directory, constants.next_js_directory, constants.pypi_static_directory]) +home_templates = Jinja2Templates([constants.home_directory]) # Create Routes @web_client.get("/", response_class=FileResponse) def index(request: Request): + # Redirect unauthenticated users to /home landing page when not in anonymous mode + # Skip redirect if user explicitly navigated from home page (indicated by query param) + if not state.anonymous_mode and not request.user.is_authenticated: + if "v" not in request.query_params: + return RedirectResponse(url="/home") return templates.TemplateResponse("index.html", context={"request": request}) @@ -28,6 +34,21 @@ def index_post(request: Request): return templates.TemplateResponse("index.html", context={"request": request}) +@web_client.get("/home", response_class=HTMLResponse) +def home_page(request: Request): + """Serve the landing page for unauthenticated users""" + # If user is authenticated, redirect to main app + if request.user.is_authenticated: + return RedirectResponse(url="/") + return home_templates.TemplateResponse("index.html", context={"request": request}) + + +@web_client.get("/home/{file_path:path}", response_class=FileResponse) +def home_static_files(file_path: str): + """Serve static files from the home landing page directory""" + return FileResponse(constants.home_directory / file_path) + + @web_client.get("/search", response_class=FileResponse) @requires(["authenticated"], redirect="login_page") def search_page(request: Request): diff --git a/src/khoj/utils/constants.py b/src/khoj/utils/constants.py index ca4e6e62..a535003f 100644 --- a/src/khoj/utils/constants.py +++ b/src/khoj/utils/constants.py @@ -3,6 +3,7 @@ from typing import Dict app_root_directory = Path(__file__).parent.parent.parent web_directory = app_root_directory / "khoj/interface/web/" +home_directory = web_directory / "home/" next_js_directory = app_root_directory / "khoj/interface/built/" pypi_static_directory = app_root_directory / "khoj/interface/compiled/" assetlinks_file_path = web_directory / ".well-known/assetlinks.json"