diff --git a/src/app.scss b/src/app.scss index 28193616..b4244f5a 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,300 +1,864 @@ -// iOS Glassmorphism Theme -// Inspired by iOS design language with modern glass effects +/* Context Engine Landing - Premium Glassmorphism */ +@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); -* { - box-sizing: border-box; +:root { + --font-body: 'Space Grotesk', 'Segoe UI', Arial, sans-serif; + --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; + --bg-primary: #0b1016; + --bg-secondary: #111a22; + --bg-card: rgba(16, 24, 32, 0.75); + --bg-card-solid: #101820; + --bg-hover: rgba(255, 255, 255, 0.05); + --bg-input: rgba(0, 0, 0, 0.35); + --text-primary: #f5f7fb; + --text-secondary: #b3c0d1; + --text-muted: #6f7b8b; + --border: rgba(255, 255, 255, 0.08); + --border-subtle: rgba(255, 255, 255, 0.04); + --accent: #00b894; + --accent-hover: #00d1a7; + --accent-glow: rgba(0, 184, 148, 0.35); + --accent-gradient: linear-gradient(135deg, #00b894 0%, #2d67ff 100%); + --success: #16a34a; + --warning: #f59e0b; + --danger: #ef4444; + --radius: 10px; + --radius-lg: 14px; + --radius-xl: 20px; + --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); + --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.5); + --shadow-lg: 0 20px 70px rgba(0, 0, 0, 0.55); } -:root { - // iOS Glass Colors - --glass-primary: rgba(255, 255, 255, 0.1); - --glass-secondary: rgba(255, 255, 255, 0.05); - --glass-border: rgba(255, 255, 255, 0.2); - --glass-shadow: rgba(0, 0, 0, 0.1); - - // iOS Gradients - --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --bg-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); - --bg-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #3a3a3a 100%); - - // Typography - --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - --text-primary: rgba(255, 255, 255, 0.9); - --text-secondary: rgba(255, 255, 255, 0.7); - --text-muted: rgba(255, 255, 255, 0.5); - - // Spacing (iOS-like) - --spacing-xs: 8px; - --spacing-sm: 16px; - --spacing-md: 24px; - --spacing-lg: 32px; - --spacing-xl: 48px; - - // Border radius (iOS-like) - --radius-sm: 8px; - --radius-md: 16px; - --radius-lg: 24px; - --radius-xl: 32px; +[data-theme="light"] { + --bg-primary: #f7f4ef; + --bg-secondary: #ffffff; + --bg-card: rgba(255, 255, 255, 0.82); + --bg-card-solid: #ffffff; + --bg-hover: rgba(0, 0, 0, 0.04); + --bg-input: rgba(0, 0, 0, 0.04); + --text-primary: #0b1016; + --text-secondary: #374151; + --text-muted: #6b7280; + --border: rgba(12, 16, 22, 0.12); + --border-subtle: rgba(12, 16, 22, 0.06); + --shadow-md: 0 8px 22px rgba(12, 16, 22, 0.12); + --shadow-lg: 0 18px 60px rgba(12, 16, 22, 0.16); +} + +*, *::before, *::after { + box-sizing: border-box; } body { + font-family: var(--font-body); + font-size: 14px; + line-height: 1.6; margin: 0; padding: 0; - font-family: var(--font-primary); - background: var(--bg-dark); + background: var(--bg-primary); color: var(--text-primary); - line-height: 1.6; + -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } -// Glass morphism utility classes -.glass { - background: rgba(255, 255, 255, 0.12); - backdrop-filter: blur(25px); - -webkit-backdrop-filter: blur(25px); - border: 1px solid rgba(255, 255, 255, 0.25); - border-radius: var(--radius-md); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15), - 0 0 0 1px rgba(255, 255, 255, 0.05); +body::before { + content: ''; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + background: radial-gradient(ellipse 80% 60% at 10% -30%, rgba(0, 184, 148, 0.12), transparent 50%), + radial-gradient(ellipse 60% 50% at 90% 10%, rgba(45, 103, 255, 0.1), transparent 50%), + radial-gradient(ellipse 50% 40% at 50% 100%, rgba(255, 138, 0, 0.08), transparent 50%); + animation: gradientPulse 15s ease-in-out infinite alternate; } -.glass-strong { - background: rgba(255, 255, 255, 0.18); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.35); - border-radius: var(--radius-lg); - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.25), - 0 0 0 1px rgba(255, 255, 255, 0.08); +@keyframes gradientPulse { + 0% { opacity: 1; } + 100% { opacity: 0.7; } } -.glass-subtle { - background: rgba(255, 255, 255, 0.08); - backdrop-filter: blur(15px); - -webkit-backdrop-filter: blur(15px); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: var(--radius-sm); - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.03); +/* Header */ +.header { + position: sticky; + top: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 32px; + height: 64px; + background: rgba(11, 16, 22, 0.85); + border-bottom: 1px solid var(--border); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); +} + +[data-theme="light"] .header { + background: rgba(255, 255, 255, 0.8); +} + +.header-left, .header-right { + display: flex; + align-items: center; + gap: 24px; +} + +.logo { + display: flex; + align-items: center; + gap: 12px; + font-weight: 600; + font-size: 17px; + color: var(--text-primary); + text-decoration: none; +} + +.logo-icon { + width: 32px; + height: 32px; + background: var(--accent-gradient); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 6px 16px rgba(0, 184, 148, 0.25); + transition: all var(--transition); +} + +.logo:hover .logo-icon { + box-shadow: 0 8px 20px rgba(0, 184, 148, 0.35); + transform: translateY(-1px); } -// iOS-style buttons +.logo-icon :global(svg) { + width: 18px; + height: 18px; + fill: white; +} + +.nav { + display: flex; + gap: 28px; +} + +.nav-link { + font-size: 14px; + color: var(--text-secondary); + text-decoration: none; + display: flex; + align-items: center; + gap: 6px; + transition: color var(--transition); +} + +.nav-link:hover { + color: var(--text-primary); +} + +.nav-link :global(svg) { + width: 16px; + height: 16px; +} + +/* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; - padding: var(--spacing-sm) var(--spacing-md); - border: none; - border-radius: var(--radius-md); - font-family: var(--font-primary); + gap: 8px; + padding: 10px 20px; + font-size: 14px; font-weight: 500; - text-decoration: none; + border-radius: var(--radius); + border: none; cursor: pointer; - transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); - white-space: nowrap; - min-width: 140px; - gap: var(--spacing-xs); - - &:hover { - transform: translateY(-2px); - } - - &:active { - transform: translateY(0); - } + transition: all var(--transition); + text-decoration: none; + position: relative; + overflow: hidden; } .btn-primary { - @extend .btn; - @extend .glass; - color: var(--text-primary); - - &:hover { - background: rgba(255, 255, 255, 0.2); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - } + background: var(--accent-gradient); + color: white; + box-shadow: 0 6px 16px rgba(0, 184, 148, 0.25); +} + +.btn-primary::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); + transition: left 0.5s ease; +} + +.btn-primary:hover::before { + left: 100%; +} + +.btn-primary:hover { + box-shadow: 0 8px 22px rgba(0, 184, 148, 0.35), 0 0 40px -10px var(--accent); + transform: translateY(-1px); } .btn-secondary { - @extend .btn; - @extend .glass-subtle; + background: var(--bg-hover); + color: var(--text-primary); + border: 1px solid var(--border); +} + +.btn-secondary:hover { + border-color: var(--accent); + transform: translateY(-1px); +} + +.btn-ghost { + background: transparent; color: var(--text-secondary); - - &:hover { - background: rgba(255, 255, 255, 0.1); - color: var(--text-primary); - } + padding: 8px 14px; } -// GitHub button with black theme -.btn-github { - background: rgba(36, 41, 47, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); +.btn-ghost:hover { + background: var(--bg-hover); color: var(--text-primary); - - &:hover { - background: rgba(36, 41, 47, 1); - border-color: rgba(255, 255, 255, 0.3); - box-shadow: 0 8px 32px rgba(36, 41, 47, 0.4); - } } -// VS Code button with custom theme -.btn-vscode { - background: rgba(0, 122, 204, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); +.btn-lg { + padding: 14px 28px; + font-size: 15px; +} + +.icon-btn { + display: flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + background: transparent; + border: none; + border-radius: var(--radius); + color: var(--text-muted); + cursor: pointer; + transition: all var(--transition); +} + +.icon-btn:hover { + background: var(--bg-hover); color: var(--text-primary); - - &:hover { - background: rgba(0, 122, 204, 1); - border-color: rgba(255, 255, 255, 0.3); - box-shadow: - 0 8px 32px rgba(0, 122, 204, 0.4), - 0 0 20px rgba(0, 122, 204, 0.2); - transform: translateY(-2px); - } } -// Contact button with vibrant mail theme -.btn-contact { - background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); - border: 1px solid rgba(255, 255, 255, 0.3); - color: white; - box-shadow: - 0 8px 32px rgba(59, 130, 246, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - - &:hover { - background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: - 0 12px 40px rgba(59, 130, 246, 0.5), - 0 0 30px rgba(59, 130, 246, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.25); - transform: translateY(-3px); - } +.icon-btn :global(svg) { + width: 18px; + height: 18px; } -// Container styles -.container { - max-width: 1200px; +[data-theme="light"] .sun-icon { + display: none; +} + +[data-theme="dark"] .moon-icon { + display: none; +} + +/* Hero */ +.hero { + max-width: 1280px; margin: 0 auto; - padding: 0 var(--spacing-md); + padding: 100px 48px 80px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; } -.hero-container { - min-height: 100vh; +.kicker { + font-size: 12px; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--accent); + font-weight: 500; +} + +.hero-title { + font-size: 56px; + font-weight: 700; + line-height: 1.1; + margin: 16px 0 24px; + letter-spacing: -0.03em; +} + +.gradient-text { + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: 18px; + color: var(--text-secondary); + line-height: 1.7; + margin-bottom: 32px; +} + +.hero-form { + display: flex; + gap: 12px; + margin-bottom: 24px; + max-width: 440px; +} + +.hero-form .input { + flex: 1; + padding: 14px 18px; +} + +.hero-actions { + display: flex; + gap: 16px; + margin-bottom: 48px; + flex-wrap: wrap; +} + +.hero-stats { + display: flex; + gap: 40px; +} + +.stat-value { + font-size: 28px; + font-weight: 700; + color: var(--accent); + display: block; +} + +.stat-label { + font-size: 12px; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +/* Code Window */ +.code-window { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-lg); + backdrop-filter: blur(20px); +} + +.code-header { display: flex; align-items: center; - justify-content: center; + gap: 8px; + padding: 14px 18px; + border-bottom: 1px solid var(--border); +} + +.dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.dot.red { background: #ff5f57; } +.dot.yellow { background: #febc2e; } +.dot.green { background: #28c840; } + +.code-title { + margin-left: auto; + font-size: 12px; + color: var(--text-muted); + font-family: var(--font-mono); +} + +.code-content { + padding: 24px; + margin: 0; + font-family: var(--font-mono); + font-size: 13px; + line-height: 1.9; + white-space: pre; + overflow-x: auto; +} + +.c-comment { color: #6a737d; } +.c-fn { color: #79c0ff; } +.c-key { color: #ff7b72; } +.c-str { color: #a5d6ff; } +.c-num { color: #79c0ff; } + +/* Graph Section */ +.graph-section { + padding: 80px 48px; + max-width: 1280px; + margin: 0 auto; +} + +.section-title { + font-size: 36px; + font-weight: 700; + text-align: center; + margin-bottom: 16px; + letter-spacing: -0.02em; +} + +.section-subtitle { + font-size: 16px; + color: var(--text-muted); + text-align: center; + margin-bottom: 48px; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.graph-container { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-xl); + padding: 32px; position: relative; + min-height: 500px; + backdrop-filter: blur(20px); + box-shadow: var(--shadow-lg); +} + +.graph-labels { + display: flex; + justify-content: space-between; + margin-bottom: 24px; + padding: 0 60px; +} + +.graph-label { + font-size: 13px; + font-weight: 500; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.graph-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + position: relative; +} + +.graph-column { + display: flex; + flex-direction: column; + gap: 12px; + width: 180px; + z-index: 2; +} + +.graph-node { + background: var(--bg-card-solid); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 12px 16px; + font-size: 13px; + display: flex; + align-items: center; + gap: 10px; + transition: all var(--transition); + cursor: default; +} + +.graph-node:hover { + border-color: var(--accent); + box-shadow: 0 0 20px -5px var(--accent-glow); + transform: translateX(4px); +} + +.graph-node.tool { border-left: 3px solid var(--accent); } +.graph-node.source { border-left: 3px solid #2d67ff; } +.graph-node.process { border-left: 3px solid #ff8a00; } + +.node-icon { + width: 18px; + height: 18px; + opacity: 0.7; + display: flex; + align-items: center; + justify-content: center; +} + +.node-icon :global(svg) { + width: 18px; + height: 18px; +} + +.graph-canvas { + position: absolute; + inset: 0; + pointer-events: none; + + .graph-line-hit { + pointer-events: stroke; + cursor: pointer; + } + + .graph-line { + pointer-events: none; + transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease; + + &.hovered { + stroke-opacity: 0.8 !important; + stroke-width: 3 !important; + filter: drop-shadow(0 0 6px currentColor); + } + } +} + +.graph-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid var(--border); +} + +.graph-stats { + font-size: 13px; + color: var(--text-muted); + font-family: var(--font-mono); +} + +.graph-progress { + width: 200px; + height: 4px; + background: var(--bg-input); + border-radius: 2px; overflow: hidden; } -// Typography -h1, h2, h3, h4, h5, h6 { - margin: 0 0 var(--spacing-sm) 0; +.graph-progress-bar { + width: 68%; + height: 100%; + background: var(--accent-gradient); + border-radius: 2px; + animation: progressPulse 2s ease-in-out infinite; +} + +@keyframes progressPulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; } +} + +/* Features Grid */ +.features-section { + padding: 80px 48px; + max-width: 1280px; + margin: 0 auto; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.feature-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 28px; + backdrop-filter: blur(20px); + transition: all var(--transition); +} + +.feature-card:hover { + border-color: var(--accent); + transform: translateY(-4px); + box-shadow: var(--shadow-md); +} + +.feature-icon { + width: 44px; + height: 44px; + background: var(--accent-gradient); + border-radius: var(--radius); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +.feature-icon :global(svg) { + width: 22px; + height: 22px; + fill: none; + stroke: white; + stroke-width: 2; +} + +.feature-title { + font-size: 18px; font-weight: 600; - line-height: 1.2; + margin-bottom: 10px; } -h1 { - font-size: clamp(2.5rem, 5vw, 4rem); - font-weight: 700; - background: linear-gradient(135deg, #fff, #a0a0a0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; +.feature-desc { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; + margin: 0; +} + +/* Demo Section */ +.demo-section { + padding: 100px 48px; + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +.demo-form { + display: flex; + gap: 12px; + max-width: 480px; + margin: 0 auto; +} + +.input { + flex: 1; + padding: 14px 18px; + font-size: 14px; + font-family: var(--font-body); + background: var(--bg-input); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text-primary); + outline: none; + transition: all var(--transition); +} + +.input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-glow); +} + +.input::placeholder { + color: var(--text-muted); +} + +/* Footer */ +.footer { + padding: 48px; + border-top: 1px solid var(--border); +} + +.footer-content { + max-width: 1280px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; } -h2 { - font-size: clamp(1.8rem, 4vw, 2.5rem); +.footer-links { + display: flex; + gap: 32px; +} + +.footer-link { + font-size: 14px; + color: var(--text-muted); + text-decoration: none; + transition: color var(--transition); +} + +.footer-link:hover { color: var(--text-primary); } -p { +.footer-copy { + font-size: 13px; + color: var(--text-muted); +} + +@keyframes drawLine { + to { stroke-dashoffset: 0; } +} + +@media (max-width: 1024px) { + .hero { + grid-template-columns: 1fr; + padding: 60px 24px; + gap: 48px; + } + .hero-title { font-size: 40px; } + .nav { display: none; } + .features-grid { grid-template-columns: 1fr; } + .graph-section, .features-section, .demo-section { padding: 60px 24px; } + .demo-form, .hero-form { flex-direction: column; } + .header { padding: 0 16px; } + .graph-labels { padding: 0 20px; } + .graph-column { width: 140px; } + .footer-content { flex-direction: column; gap: 24px; text-align: center; } + .footer-links { flex-wrap: wrap; justify-content: center; } +} + +/* Glass morphism utility classes (kept for contact page compatibility) */ +.glass { + background: var(--bg-card); + backdrop-filter: blur(25px); + -webkit-backdrop-filter: blur(25px); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); +} + +.glass-strong { + background: var(--bg-card); + backdrop-filter: blur(35px); + -webkit-backdrop-filter: blur(35px); + border: 1px solid var(--border); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-lg); +} + +.glass-subtle { + background: var(--bg-hover); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border: 1px solid var(--border); + border-radius: var(--radius); +} + +/* Contact page specific styles */ +.contact-container { + padding: 80px 48px; + max-width: 1200px; + margin: 0 auto; +} + +.contact-header { + text-align: center; + margin-bottom: 48px; +} + +.contact-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 32px; +} + +.contact-info { + padding: 32px; +} + +.contact-info h2 { + font-size: 24px; + margin-bottom: 16px; +} + +.contact-info p { + margin-bottom: 24px; +} + +.info-items { + display: flex; + flex-direction: column; + gap: 16px; +} + +.info-item { + display: flex; + align-items: flex-start; + gap: 16px; + padding: 16px; +} + +.info-item .icon { + color: var(--accent); +} + +.info-item h3 { + font-size: 14px; + font-weight: 600; + margin: 0 0 4px; +} + +.info-item a, .info-item p { + font-size: 14px; color: var(--text-secondary); - margin-bottom: var(--spacing-sm); - font-size: 1.1rem; + margin: 0; } -// Animations -@keyframes float { - 0%, 100% { transform: translateY(0px); } - 50% { transform: translateY(-20px); } +.info-item a:hover { + color: var(--accent); } -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.8; } +.contact-form { + padding: 32px; } -.float { - animation: float 6s ease-in-out infinite; +.contact-form h2 { + font-size: 24px; + margin-bottom: 24px; } -.pulse { - animation: pulse 2s ease-in-out infinite; +.form-header { + margin-bottom: 24px; } -// Background effects -.bg-gradient { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - background: linear-gradient( - 135deg, - #1e3c72 0%, - #2a5298 25%, - #667eea 50%, - #764ba2 75%, - #f093fb 100% - ); - opacity: 0.8; -} - -.bg-overlay { - position: fixed; - top: 0; - left: 0; +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + font-size: 14px; + font-weight: 500; + margin-bottom: 8px; + color: var(--text-secondary); +} + +.form-group input, +.form-group textarea, +.form-group select { width: 100%; - height: 100%; - z-index: -1; - background: radial-gradient( - ellipse at center, - rgba(255, 255, 255, 0.05) 0%, - rgba(0, 0, 0, 0.3) 70%, - rgba(0, 0, 0, 0.7) 100% - ); -} - -// Responsive design -@media (max-width: 768px) { - :root { - --spacing-md: 16px; - --spacing-lg: 24px; - --spacing-xl: 32px; - } - - .container { - padding: 0 var(--spacing-sm); + padding: 12px 16px; + font-size: 14px; + font-family: var(--font-body); + background: var(--bg-input); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text-primary); + outline: none; + transition: all var(--transition); +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-glow); +} + +.form-group textarea { + min-height: 120px; + resize: vertical; +} + +@media (max-width: 1024px) { + .contact-content { + grid-template-columns: 1fr; } - - .glass, .glass-strong { - border-radius: var(--radius-sm); - backdrop-filter: blur(15px); - -webkit-backdrop-filter: blur(15px); + .contact-container { + padding: 60px 24px; } -} \ No newline at end of file +} diff --git a/src/lib/images/github.svg b/src/lib/images/github.svg deleted file mode 100644 index 37fa923d..00000000 --- a/src/lib/images/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/lib/images/svelte-logo.svg b/src/lib/images/svelte-logo.svg deleted file mode 100644 index 49492a83..00000000 --- a/src/lib/images/svelte-logo.svg +++ /dev/null @@ -1 +0,0 @@ -svelte-logo \ No newline at end of file diff --git a/src/lib/images/svelte-welcome.png b/src/lib/images/svelte-welcome.png deleted file mode 100644 index fe7d2d6b..00000000 Binary files a/src/lib/images/svelte-welcome.png and /dev/null differ diff --git a/src/lib/images/svelte-welcome.webp b/src/lib/images/svelte-welcome.webp deleted file mode 100644 index 6ec1a28d..00000000 Binary files a/src/lib/images/svelte-welcome.webp and /dev/null differ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 36f93b78..a460e843 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,154 +1,99 @@ - -
-
- -{#if !hideBanner} -
- -
-{/if} - -
-
- {@render children()} -
-
- - diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts deleted file mode 100644 index d47fd7c6..00000000 --- a/src/routes/+page.server.ts +++ /dev/null @@ -1,123 +0,0 @@ -import { GITHUB_TOKEN } from '$env/static/private'; - -const GITHUB_API = 'https://api.github.com/graphql'; - -const REPO_QUERY = ` - query { - repository(owner: "m1rl0k", name: "Context-Engine") { - stargazerCount - forkCount - issues(states: OPEN) { - totalCount - } - pullRequests(states: OPEN) { - totalCount - } - releases(first: 1) { - nodes { - name - publishedAt - tagName - } - } - languages(first: 5) { - edges { - size - node { - name - color - } - } - } - defaultBranchRef { - target { - ... on Commit { - history(first: 1) { - nodes { - committedDate - } - } - } - } - } - } - } -`; - -export async function load() { - try { - // Only fetch if token is available - if (!GITHUB_TOKEN || GITHUB_TOKEN === 'your_github_token_here') { - return { - metrics: { - stars: '2.1k', - forks: '456', - language: 'Python', - status: 'fallback' - } - }; - } - - const response = await fetch(GITHUB_API, { - method: 'POST', - headers: { - 'Authorization': `Bearer ${GITHUB_TOKEN}`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ query: REPO_QUERY }), - }); - - if (!response.ok) { - throw new Error(`GitHub API error: ${response.status}`); - } - - const data = await response.json(); - - if (data.errors) { - throw new Error(`GraphQL errors: ${JSON.stringify(data.errors)}`); - } - - const repo = data.data?.repository; - - if (!repo) { - throw new Error('Repository not found'); - } - - // Calculate total language size for percentages - const totalSize = repo.languages.edges.reduce((sum: number, edge: any) => sum + edge.size, 0); - - // Sort languages by size (descending) to get the primary language - const sortedLanguages = repo.languages.edges.sort((a: any, b: any) => b.size - a.size); - const primaryLanguage = sortedLanguages[0]?.node.name || 'Unknown'; - - const metrics = { - stars: repo.stargazerCount.toLocaleString(), - forks: repo.forkCount.toLocaleString(), - openIssues: repo.issues.totalCount, - openPRs: repo.pullRequests.totalCount, - language: primaryLanguage, - latestRelease: repo.releases.nodes[0] || null, - languages: sortedLanguages.map((edge: any) => ({ - name: edge.node.name, - color: edge.node.color, - percentage: ((edge.size / totalSize) * 100).toFixed(1) - })), - lastCommit: repo.defaultBranchRef?.target?.history?.nodes[0]?.committedDate || null, - status: 'live' - }; - - return { metrics }; - - } catch (error) { - console.warn('Failed to fetch GitHub metrics:', error); - return { - metrics: { - stars: '2.1k', - forks: '456', - language: 'Python', - status: 'fallback', - error: error instanceof Error ? error.message : 'Unknown error' - } - }; - } -} \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 126b410b..f60659a1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,1402 +1,427 @@ - Context Engine - MCP Retrieval Stack + Context Engine - Your Codebase, Instantly Understood -
-
- -
-
- - - - MCP Retrieval Stack -
- -

Context Engine

- -

- Self-hosted AI retrieval stack with hybrid search, micro-chunking, and pluggable models. One - command deploys enterprise-grade code indexing for any MCP client. -

- -
- - - Get Started - - - - - - - View on GitHub - - - - - VS Code Extension - - - - - Contact Us - + +
+
+ AI Code Context Platform +

+ Your Codebase,
Instantly Understood +

+

+ Semantic search, symbol graphs, and persistent memory across every IDE. Stop explaining your + codebase to AI. Start coding. +

+ + {#if heroSubmitted} +
+ Thanks! We'll be in touch at {heroEmail}
-
+ {:else} +
+ + +
+ {/if} - -
-
-
-
-
- - - -
- Context Engine -
-
-
- # Deploy Context Engine -
-
- docker - compose up -d -
-
- # Index your codebase -
-
- curl - -X POST /index -
-
- # Ready for MCP clients! -
-
-
-
+ -
-
- - -
-
-
-
-
- -
-
-
{data.metrics.stars}
-
GitHub Stars
-
-
-
-
- -
-
-
{data.metrics.forks}
-
Forks
-
+
+
+ <100ms + Search Latency
- -
-
- -
-
-
{data.metrics.language}
-
Primary Language
-
+
+ 16 + IDE Integrations
- -
-
- -
-
-
{data.metrics.status === 'live' ? 'Live' : 'Demo'}
-
Data Status
-
+
+ 32 + Languages
+
- {#if data.metrics.languages && data.metrics.languages.length > 0} -
-

Technology Stack

-
- {#each data.metrics.languages.slice(0, 4) as language} -
-
- {language.name} - {language.percentage}% -
- {/each} -
+
+
+
+ + + + mcp_tools.py
- {/if} +
# Find authentication flow
+result = repo_search(
+    query="user authentication",
+    limit=5,
+    compact=True
+)
+# 4,456 sources -> 5 relevant in 47ms
+
- -
-
-
-

Context‑Engine — Key Differentiators

-

- "Self‑hosted, code‑aware retrieval and context compression layer for AI agents - hybrid - search, deep AST indexing, and pluggable models built for private, enterprise‑grade - deployment." -

+ +
+

How It Works

+

+ From raw code to curated context in milliseconds. Every query flows through our semantic + understanding layer. +

+ +
+
+ Raw Sources + Semantic Processing + MCP Tools
-
-
-
- -
-

Fully Self‑Hosted

-

- Run on your infra, your vector DB, your LLM, your rules. No vendor lock‑in, complete - control over your data and deployment. -

-
- -
-
- -
-

Hybrid Retrieval by Design

-

- Dense + lexical fusion, path priors, symbol boosts, recency weighting, and MMR for - diversity — precision engineered for code. -

+
+
+ {#each sources as source} + {@const Icon = source.icon} +
+ + + + {source.label} +
+ {/each}
-
-
- -
-

Deep Code‑Aware Indexing

-

- AST symbols/imports/calls, semantic chunking, optional micro‑chunks (ReFRAG) for tighter - context windows and precise retrieval. -

+
+ {#each processors as processor} + {@const Icon = processor.icon} +
+ + + + {processor.label} +
+ {/each}
-
-
- -
-

Pluggable Models

-

- Swap embeddings/rerankers per workload or hardware budget — scale from laptop to cluster - with the same architecture. -

+
+ {#each tools as tool} +
+ + + + {tool.label} +
+ {/each}
-
-
- +
- {#if showAllDifferentiators} -
-
-
- -
-

Incremental Learning Loop

-

- Optional in‑process learning reranker with hot‑reloaded weights and convergence tracking - for continuous improvement. -

-
- -
-
- -
-

MCP‑Native Architecture

-

- Acts as a retrieval backbone for tool‑using agents and private MCP deployments — built - for the agent ecosystem. -

-
- -
-
- -
-

Reproducible Benchmarking

-

- Built‑in benchmark suite for CoSQA/CoIR/SWE‑bench with full env snapshots — measure what - matters for your use case. -

-
- -
-
- -
-

Enterprise‑Grade Privacy

-

- Zero telemetry, air‑gapped deployment support, and complete data sovereignty for - sensitive codebases and compliance requirements. -

-
+
-
-
-

Powerful Features

- -
-
+ +
+

Built for Developers

+

+ Everything you need to give your AI deep understanding of your codebase. +

+ +
+ {#each features as feature} + {@const Icon = feature.icon} +
- +
-

Hybrid Search

-

Dense + lexical + reranker for precise code discovery

+

{feature.title}

+

{feature.desc}

- -
-
- -
-

ReFRAG Chunking

-

Micro-chunking for optimal context retrieval

-
- -
-
- -
-

Local LLM

-

Enhanced prompts with local model processing

-
- -
-
- -
-

MCP Compatible

-

Works with Cursor, Windsurf, Roo, Cline, and more

-
-
+ {/each}
-
-
-

Get Started in Minutes

- -
-
-
-

Deploy Context Engine

-

Three simple commands to get running

-
+ +
+

Get Early Access

+

Join the beta and give your AI the context it deserves.

-
-
-
- - - -
- Quick Start -
-
-
- $ - docker compose up -d - # Deploy Context Engine - -
-
- $ - cp ctx_config.example.json ctx_config.json - # Configure - -
-
- $ - curl -X POST localhost:8000/index - # Start indexing - -
-
-
-
-
- -
- Complete Setup Guide - Configuration Reference + {#if demoSubmitted} +
+ Thanks! We'll be in touch at {demoEmail}
-
+ {:else} +
+ + +
+ {/if}
-
-
-

Comprehensive Documentation

-

Everything you need to master Context Engine

- - - -
- - + diff --git a/src/routes/Counter.svelte b/src/routes/Counter.svelte deleted file mode 100644 index a9388f4c..00000000 --- a/src/routes/Counter.svelte +++ /dev/null @@ -1,99 +0,0 @@ - - -
- - -
-
- - {Math.floor(count.current)} -
-
- - -
- - diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte deleted file mode 100644 index 0e719eb0..00000000 --- a/src/routes/Header.svelte +++ /dev/null @@ -1,130 +0,0 @@ - - -
-
- - SvelteKit - -
- - - -
- - GitHub - -
-
- - diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte index 4ed8e64e..d5037204 100644 --- a/src/routes/contact/+page.svelte +++ b/src/routes/contact/+page.svelte @@ -22,10 +22,17 @@ let formData = $state({ name: '', email: '', - subject: isDemo ? 'Request Demo' : '', + subject: '', message: '' }); + // Set subject when isDemo changes + $effect(() => { + if (isDemo && !formData.subject) { + formData.subject = 'Request Demo'; + } + }); + async function handleSubmit(event: SubmitEvent) { event.preventDefault(); formState = 'submitting'; diff --git a/src/routes/docs/[slug]/+page.ts b/src/routes/docs/[slug]/+page.ts index 2de45ad0..da79f7b8 100644 --- a/src/routes/docs/[slug]/+page.ts +++ b/src/routes/docs/[slug]/+page.ts @@ -1,6 +1,5 @@ import { error } from '@sveltejs/kit'; import { marked } from 'marked'; -import hljs from 'highlight.js'; import { base } from '$app/paths'; export const prerender = true; diff --git a/src/routes/layout.css b/src/routes/layout.css deleted file mode 100644 index f62c2c7a..00000000 --- a/src/routes/layout.css +++ /dev/null @@ -1,105 +0,0 @@ -@import '@fontsource/fira-mono'; - -:root { - --font-body: - Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; - --font-mono: 'Fira Mono', monospace; - --color-bg-0: rgb(202, 216, 228); - --color-bg-1: hsl(209, 36%, 86%); - --color-bg-2: hsl(224, 44%, 95%); - --color-theme-1: #ff3e00; - --color-theme-2: #4075a6; - --color-text: rgba(0, 0, 0, 0.7); - --column-width: 42rem; - --column-margin-top: 4rem; - font-family: var(--font-body); - color: var(--color-text); -} - -body { - min-height: 100vh; - margin: 0; - background-attachment: fixed; - background-color: var(--color-bg-1); - background-size: 100vw 100vh; - background-image: - radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%), - linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%); -} - -h1, -h2, -p { - font-weight: 400; -} - -p { - line-height: 1.5; -} - -a { - color: var(--color-theme-1); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -h1 { - font-size: 2rem; - text-align: center; -} - -h2 { - font-size: 1rem; -} - -pre { - font-size: 16px; - font-family: var(--font-mono); - background-color: rgba(255, 255, 255, 0.45); - border-radius: 3px; - box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); - padding: 0.5em; - overflow-x: auto; - color: var(--color-text); -} - -.text-column { - display: flex; - max-width: 48rem; - flex: 0.6; - flex-direction: column; - justify-content: center; - margin: 0 auto; -} - -input, -button { - font-size: inherit; - font-family: inherit; -} - -button:focus:not(:focus-visible) { - outline: none; -} - -@media (min-width: 720px) { - h1 { - font-size: 2.4rem; - } -} - -.visually-hidden { - border: 0; - clip: rect(0 0 0 0); - height: auto; - margin: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; -}