You’re right—we can (and should) look deeper into the *technical* underpinnings of the Kayba site to extract lessons for our own build. Here’s a more granular breakdown of the competitor’s **design stack** and layout choices, plus how we can outshine them with our React/Tailwind stack.
Browse files---
## 🔬 What Kayba.ai is doing technically
* **Built with Framer:** The HTML source explicitly identifies Framer as the site generator—there’s a script loading `framer.com/edit/init.mjs` and a `<meta name="generator" content="Framer …>` tag. This indicates the entire site is published via Framer’s no‑code platform, which provides visual design tools and built‑in CMS.
* **Custom fonts & gradients:** They load multiple weights of **DM Sans** and **Inter** from Google Fonts. These fonts, paired with layered gradient backgrounds and a subtle star field, create their “midnight zone” aesthetic.
* **Section layouts:** The page is a long scroll with:
* A hero block set against a cosmic gradient (“The Context Layer Your AI Is Missing”).
* A “Why agentic systems fail” section with three cards explaining poor retrieval, context rot, and unstructured context.
* A features section introducing **Token Compaction**, **Context Orchestration**, and **Retrieval & Prioritization**.
* A diagram explaining ACE and its components (playbook, generator, reflector, curator, merger).
* A “TeamLayer” memory hub explainer.
* Embedded zCal booking widget.
* **Integration of interactive services:** The calendar booking uses **zcal** (a third‑party scheduling embed), and there’s an interactive diagram built within Framer. All images and assets are served from `framerusercontent.com`, leveraging Framer’s CDN.
In short, Kayba’s site leverages Framer’s pre‑built animations, gradient presets, and scheduling embed. The design choices—heavy gradients, cosmic textures, floating icons—sell the narrative of a high‑tech, cutting‑edge product.
---
## 🧠 How our current site compares
Our draft landing page (built in React with Tailwind, shadcn/ui components and Framer Motion) already has a modern dark theme, animated hero text, and modular cards. But it lacks some of the polish and perceived depth of the competitor’s design:
* We use a solid black background with gradient text, whereas Kayba uses multi‑layered gradients and subtle animated particles, giving a “deep space” feel.
* Our information hierarchy is simpler—three cards for ACE Playbooks, Cybernetic aMCP and Early Experience—without the narrative arc (problem → pain points → solution) that Kayba’s sections follow.
* We don’t yet have interactive infographics or third‑party embeds (like zCal for scheduling) to match their professionalism.
---
## 🚀 What to improve and how
1. **Introduce layered gradients and subtle textures.** Use CSS radial or linear gradients with dark blues and purples, and overlay a low‑opacity star-field texture. You can implement this yourself with CSS or import an SVG/PNG background.
2. **Adopt high‑contrast fonts.** Consider switching to **DM Sans** or **Inter** (Google Fonts) for headings and body text; these are crisp and legible on dark backgrounds.
3. **Narrative structure:**
* *Problem section:* After the hero, add a “Why current agentic systems fail” section similar to Kayba’s. Summarize issues such as context collapse and brittle prompts, citing research or your own benchmarks.
* *Solution cards:* Retain your three product pillars but connect each to a specific pain point.
* *Visual feedback loop:* Create an interactive or animated diagram showing how Early Experience feeds data into ACE Playbooks and how the aMCP orchestrates agents. Framer Motion can handle these animations.
4. **Scheduling & contact embed:** Integrate a scheduling widget (zCal, Calendly or similar) so visitors can instantly book a demo. This small addition gives the site a polished feel.
5. **Star‑field/particle animations:** Use canvas or a lightweight React particle library to add animated dust/particles in the background, echoing the cosmic look.
6. **Trusted logos and badges:** If you have research partners or customers, showcase them early in the scroll. Kayba uses ETH Zürich and ETH AI Center logos to boost credibility; you can highlight your own collaborators or open‑source community.
7. **Case studies & metrics:** Plan a section with charts or infographics summarizing ROI (like the DevOps or customer support numbers from your research) to convey value at a glance. These can be simple bar or line charts generated with Recharts and incorporated into cards.
8. **Framer vs. Code:** Kayba can iterate quickly in Framer, but your code‑based approach allows more control. Embrace this by adding advanced interactions (e.g. micro‑animations on hover, scroll‑triggered transitions) and ensuring the site is highly performant.
By incorporating the competitor’s polish—gradients, narrative flow, interactive diagrams and scheduling embeds—while emphasizing your **broader technological edge** (self‑improving agents, full cybernetic control), your landing page can look more compelling than Kayba’s and communicate the unique scope of your solution.
- README.md +8 -5
- components/footer.js +107 -0
- components/navbar.js +78 -0
- index.html +149 -19
- script.js +35 -0
- style.css +22 -18
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Cosmic Context Navigator
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Cosmic Context Navigator 🌌
|
| 3 |
+
colorFrom: pink
|
| 4 |
+
colorTo: blue
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
|
@@ -0,0 +1,107 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
footer {
|
| 7 |
+
background: rgba(10, 11, 26, 0.9);
|
| 8 |
+
color: white;
|
| 9 |
+
padding: 4rem 2rem 2rem;
|
| 10 |
+
text-align: center;
|
| 11 |
+
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
| 12 |
+
}
|
| 13 |
+
.footer-content {
|
| 14 |
+
max-width: 1200px;
|
| 15 |
+
margin: 0 auto;
|
| 16 |
+
display: grid;
|
| 17 |
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| 18 |
+
gap: 2rem;
|
| 19 |
+
text-align: left;
|
| 20 |
+
}
|
| 21 |
+
.footer-column h3 {
|
| 22 |
+
color: #8b5cf6;
|
| 23 |
+
font-weight: 600;
|
| 24 |
+
margin-bottom: 1.5rem;
|
| 25 |
+
font-size: 1.25rem;
|
| 26 |
+
}
|
| 27 |
+
.footer-links {
|
| 28 |
+
display: flex;
|
| 29 |
+
flex-direction: column;
|
| 30 |
+
gap: 0.75rem;
|
| 31 |
+
}
|
| 32 |
+
.footer-links a {
|
| 33 |
+
color: rgba(255, 255, 255, 0.6);
|
| 34 |
+
text-decoration: none;
|
| 35 |
+
transition: color 0.3s ease;
|
| 36 |
+
}
|
| 37 |
+
.footer-links a:hover {
|
| 38 |
+
color: white;
|
| 39 |
+
}
|
| 40 |
+
.social-links {
|
| 41 |
+
display: flex;
|
| 42 |
+
gap: 1rem;
|
| 43 |
+
margin-top: 1.5rem;
|
| 44 |
+
}
|
| 45 |
+
.social-links a {
|
| 46 |
+
color: rgba(255, 255, 255, 0.6);
|
| 47 |
+
transition: color 0.3s ease;
|
| 48 |
+
}
|
| 49 |
+
.social-links a:hover {
|
| 50 |
+
color: #8b5cf6;
|
| 51 |
+
}
|
| 52 |
+
.copyright {
|
| 53 |
+
margin-top: 4rem;
|
| 54 |
+
padding-top: 2rem;
|
| 55 |
+
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
| 56 |
+
color: rgba(255, 255, 255, 0.4);
|
| 57 |
+
font-size: 0.875rem;
|
| 58 |
+
}
|
| 59 |
+
</style>
|
| 60 |
+
<footer>
|
| 61 |
+
<div class="footer-content">
|
| 62 |
+
<div class="footer-column">
|
| 63 |
+
<h3>CosmicContext</h3>
|
| 64 |
+
<p>Navigating the complexity of AI memory with adaptive context orchestration.</p>
|
| 65 |
+
<div class="social-links">
|
| 66 |
+
<a href="#"><i data-feather="twitter"></i></a>
|
| 67 |
+
<a href="#"><i data-feather="github"></i></a>
|
| 68 |
+
<a href="#"><i data-feather="linkedin"></i></a>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
<div class="footer-column">
|
| 72 |
+
<h3>Product</h3>
|
| 73 |
+
<div class="footer-links">
|
| 74 |
+
<a href="#features">Features</a>
|
| 75 |
+
<a href="#problems">Solutions</a>
|
| 76 |
+
<a href="#demo">Pricing</a>
|
| 77 |
+
<a href="#demo">Demo</a>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
<div class="footer-column">
|
| 81 |
+
<h3>Resources</h3>
|
| 82 |
+
<div class="footer-links">
|
| 83 |
+
<a href="#">Documentation</a>
|
| 84 |
+
<a href="#">API Reference</a>
|
| 85 |
+
<a href="#">Blog</a>
|
| 86 |
+
<a href="#">Community</a>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
<div class="footer-column">
|
| 90 |
+
<h3>Company</h3>
|
| 91 |
+
<div class="footer-links">
|
| 92 |
+
<a href="#">About</a>
|
| 93 |
+
<a href="#">Careers</a>
|
| 94 |
+
<a href="#">Contact</a>
|
| 95 |
+
<a href="#">Privacy</a>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
<div class="copyright">
|
| 100 |
+
© ${new Date().getFullYear()} Cosmic Context Navigator. All rights reserved.
|
| 101 |
+
</div>
|
| 102 |
+
</footer>
|
| 103 |
+
`;
|
| 104 |
+
}
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
customElements.define('custom-footer', CustomFooter);
|
|
@@ -0,0 +1,78 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
nav {
|
| 7 |
+
background: rgba(10, 11, 26, 0.8);
|
| 8 |
+
backdrop-filter: blur(10px);
|
| 9 |
+
padding: 1.5rem;
|
| 10 |
+
display: flex;
|
| 11 |
+
justify-content: space-between;
|
| 12 |
+
align-items: center;
|
| 13 |
+
position: fixed;
|
| 14 |
+
width: 100%;
|
| 15 |
+
top: 0;
|
| 16 |
+
z-index: 1000;
|
| 17 |
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
| 18 |
+
}
|
| 19 |
+
.logo {
|
| 20 |
+
color: white;
|
| 21 |
+
font-weight: bold;
|
| 22 |
+
font-size: 1.5rem;
|
| 23 |
+
background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
|
| 24 |
+
-webkit-background-clip: text;
|
| 25 |
+
background-clip: text;
|
| 26 |
+
-webkit-text-fill-color: transparent;
|
| 27 |
+
}
|
| 28 |
+
ul {
|
| 29 |
+
display: flex;
|
| 30 |
+
gap: 1.5rem;
|
| 31 |
+
list-style: none;
|
| 32 |
+
margin: 0;
|
| 33 |
+
padding: 0;
|
| 34 |
+
align-items: center;
|
| 35 |
+
}
|
| 36 |
+
a {
|
| 37 |
+
color: rgba(255, 255, 255, 0.8);
|
| 38 |
+
text-decoration: none;
|
| 39 |
+
transition: all 0.3s ease;
|
| 40 |
+
font-weight: 500;
|
| 41 |
+
font-size: 1rem;
|
| 42 |
+
}
|
| 43 |
+
a:hover {
|
| 44 |
+
color: white;
|
| 45 |
+
text-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
|
| 46 |
+
}
|
| 47 |
+
.cta-button {
|
| 48 |
+
background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
|
| 49 |
+
color: white;
|
| 50 |
+
padding: 0.5rem 1.5rem;
|
| 51 |
+
border-radius: 9999px;
|
| 52 |
+
font-weight: 600;
|
| 53 |
+
}
|
| 54 |
+
.cta-button:hover {
|
| 55 |
+
box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
|
| 56 |
+
color: white;
|
| 57 |
+
}
|
| 58 |
+
@media (max-width: 768px) {
|
| 59 |
+
nav {
|
| 60 |
+
flex-direction: column;
|
| 61 |
+
gap: 1rem;
|
| 62 |
+
}
|
| 63 |
+
}
|
| 64 |
+
</style>
|
| 65 |
+
<nav>
|
| 66 |
+
<a href="#" class="logo">CosmicContext</a>
|
| 67 |
+
<ul>
|
| 68 |
+
<li><a href="#features">Features</a></li>
|
| 69 |
+
<li><a href="#problems">Problems</a></li>
|
| 70 |
+
<li><a href="#demo">Demo</a></li>
|
| 71 |
+
<li><a href="#demo" class="cta-button">Get Started</a></li>
|
| 72 |
+
</ul>
|
| 73 |
+
</nav>
|
| 74 |
+
`;
|
| 75 |
+
}
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
customElements.define('custom-navbar', CustomNavbar);
|
|
@@ -1,19 +1,149 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Cosmic Context Navigator | AI Context Layer</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 12 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 13 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 14 |
+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
| 15 |
+
</head>
|
| 16 |
+
<body class="bg-[#0a0b1a] text-white font-sans">
|
| 17 |
+
<custom-navbar></custom-navbar>
|
| 18 |
+
|
| 19 |
+
<main>
|
| 20 |
+
<!-- Hero Section -->
|
| 21 |
+
<section id="hero" class="min-h-screen flex items-center justify-center relative overflow-hidden">
|
| 22 |
+
<div class="absolute inset-0 bg-gradient-to-br from-[#0f0c29] via-[#302b63] to-[#24243e] opacity-80"></div>
|
| 23 |
+
<div class="absolute inset-0 opacity-20" id="vanta-bg"></div>
|
| 24 |
+
<div class="container mx-auto px-6 py-24 relative z-10 text-center">
|
| 25 |
+
<h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-blue-400">
|
| 26 |
+
The Context Layer<br>Your AI Is Missing
|
| 27 |
+
</h1>
|
| 28 |
+
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-12">
|
| 29 |
+
Navigate the cosmic complexity of AI memory with our adaptive context engine
|
| 30 |
+
</p>
|
| 31 |
+
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
| 32 |
+
<a href="#demo" class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl">
|
| 33 |
+
Book Demo
|
| 34 |
+
</a>
|
| 35 |
+
<a href="#features" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-8 rounded-full transition-all duration-300">
|
| 36 |
+
Explore Features
|
| 37 |
+
</a>
|
| 38 |
+
</div>
|
| 39 |
+
</div>
|
| 40 |
+
</section>
|
| 41 |
+
|
| 42 |
+
<!-- Problem Section -->
|
| 43 |
+
<section id="problems" class="py-20 bg-gray-900/50">
|
| 44 |
+
<div class="container mx-auto px-6">
|
| 45 |
+
<div class="text-center mb-16">
|
| 46 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-4">Why Agentic Systems Fail Without Context</h2>
|
| 47 |
+
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Current approaches suffer from fundamental limitations in handling complex, evolving contexts</p>
|
| 48 |
+
</div>
|
| 49 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 50 |
+
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50 hover:border-purple-500/30 transition-all">
|
| 51 |
+
<div class="text-purple-400 mb-4">
|
| 52 |
+
<i data-feather="alert-circle" class="w-12 h-12"></i>
|
| 53 |
+
</div>
|
| 54 |
+
<h3 class="text-2xl font-bold mb-3">Brittle Retrieval</h3>
|
| 55 |
+
<p class="text-gray-400">Static prompts fail to adapt to evolving conversation contexts, leading to irrelevant or outdated responses.</p>
|
| 56 |
+
</div>
|
| 57 |
+
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50 hover:border-blue-500/30 transition-all">
|
| 58 |
+
<div class="text-blue-400 mb-4">
|
| 59 |
+
<i data-feather="clock" class="w-12 h-12"></i>
|
| 60 |
+
</div>
|
| 61 |
+
<h3 class="text-2xl font-bold mb-3">Context Rot</h3>
|
| 62 |
+
<p class="text-gray-400">Important details decay over time as new information floods the system without proper prioritization.</p>
|
| 63 |
+
</div>
|
| 64 |
+
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700/50 hover:border-pink-500/30 transition-all">
|
| 65 |
+
<div class="text-pink-400 mb-4">
|
| 66 |
+
<i data-feather="layers" class="w-12 h-12"></i>
|
| 67 |
+
</div>
|
| 68 |
+
<h3 class="text-2xl font-bold mb-3">Unstructured Memory</h3>
|
| 69 |
+
<p class="text-gray-400">Critical context gets buried in unstructured text blobs instead of being organized for rapid access.</p>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
</section>
|
| 74 |
+
|
| 75 |
+
<!-- Features Section -->
|
| 76 |
+
<section id="features" class="py-20">
|
| 77 |
+
<div class="container mx-auto px-6">
|
| 78 |
+
<div class="text-center mb-16">
|
| 79 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-4">Cosmic-Grade Context Features</h2>
|
| 80 |
+
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Our technology transforms how AI systems understand and utilize context</p>
|
| 81 |
+
</div>
|
| 82 |
+
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
| 83 |
+
<div class="bg-gradient-to-br from-purple-900/30 to-blue-900/30 p-8 rounded-xl border border-purple-500/20">
|
| 84 |
+
<div class="text-purple-300 mb-4">
|
| 85 |
+
<i data-feather="cpu" class="w-12 h-12"></i>
|
| 86 |
+
</div>
|
| 87 |
+
<h3 class="text-2xl font-bold mb-3">Token Compaction</h3>
|
| 88 |
+
<p class="text-gray-300">Dynamically compress and prioritize context to stay within token limits without losing meaning.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="bg-gradient-to-br from-blue-900/30 to-indigo-900/30 p-8 rounded-xl border border-blue-500/20">
|
| 91 |
+
<div class="text-blue-300 mb-4">
|
| 92 |
+
<i data-feather="git-merge" class="w-12 h-12"></i>
|
| 93 |
+
</div>
|
| 94 |
+
<h3 class="text-2xl font-bold mb-3">Context Orchestration</h3>
|
| 95 |
+
<p class="text-gray-300">Seamlessly blend long-term memory with real-time conversation flow for coherent interactions.</p>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="bg-gradient-to-br from-indigo-900/30 to-pink-900/30 p-8 rounded-xl border border-pink-500/20">
|
| 98 |
+
<div class="text-pink-300 mb-4">
|
| 99 |
+
<i data-feather="search" class="w-12 h-12"></i>
|
| 100 |
+
</div>
|
| 101 |
+
<h3 class="text-2xl font-bold mb-3">Adaptive Retrieval</h3>
|
| 102 |
+
<p class="text-gray-300">Intelligently surface relevant context based on conversation trajectory and predicted needs.</p>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</section>
|
| 107 |
+
|
| 108 |
+
<!-- Demo Section -->
|
| 109 |
+
<section id="demo" class="py-20 bg-gray-900/50">
|
| 110 |
+
<div class="container mx-auto px-6">
|
| 111 |
+
<div class="max-w-4xl mx-auto bg-gray-800/50 p-8 md:p-12 rounded-xl border border-gray-700/50">
|
| 112 |
+
<div class="text-center mb-8">
|
| 113 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-4">See the Cosmic Difference</h2>
|
| 114 |
+
<p class="text-xl text-gray-400">Book a demo to explore how our context layer can transform your AI applications</p>
|
| 115 |
+
</div>
|
| 116 |
+
<div class="bg-gray-900 p-6 rounded-lg">
|
| 117 |
+
<!-- Calendly inline widget begin -->
|
| 118 |
+
<div class="calendly-inline-widget" data-url="https://calendly.com/yourusername/demo" style="min-width:320px;height:630px;"></div>
|
| 119 |
+
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
|
| 120 |
+
<!-- Calendly inline widget end -->
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
</section>
|
| 125 |
+
</main>
|
| 126 |
+
|
| 127 |
+
<custom-footer></custom-footer>
|
| 128 |
+
|
| 129 |
+
<script src="components/navbar.js"></script>
|
| 130 |
+
<script src="components/footer.js"></script>
|
| 131 |
+
<script src="script.js"></script>
|
| 132 |
+
<script>
|
| 133 |
+
feather.replace();
|
| 134 |
+
VANTA.GLOBE({
|
| 135 |
+
el: "#vanta-bg",
|
| 136 |
+
mouseControls: true,
|
| 137 |
+
touchControls: true,
|
| 138 |
+
gyroControls: false,
|
| 139 |
+
minHeight: 200.00,
|
| 140 |
+
minWidth: 200.00,
|
| 141 |
+
scale: 1.00,
|
| 142 |
+
scaleMobile: 1.00,
|
| 143 |
+
color: 0x5a4fff,
|
| 144 |
+
backgroundColor: 0x0a0b1a
|
| 145 |
+
});
|
| 146 |
+
</script>
|
| 147 |
+
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
|
| 148 |
+
</body>
|
| 149 |
+
</html>
|
|
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// Smooth scrolling for anchor links
|
| 2 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 3 |
+
anchor.addEventListener('click', function (e) {
|
| 4 |
+
e.preventDefault();
|
| 5 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 6 |
+
behavior: 'smooth'
|
| 7 |
+
});
|
| 8 |
+
});
|
| 9 |
+
});
|
| 10 |
+
|
| 11 |
+
// Intersection Observer for animations
|
| 12 |
+
const animateOnScroll = () => {
|
| 13 |
+
const sections = document.querySelectorAll('section');
|
| 14 |
+
|
| 15 |
+
const observer = new IntersersectionObserver((entries) => {
|
| 16 |
+
entries.forEach(entry => {
|
| 17 |
+
if (entry.isIntersecting) {
|
| 18 |
+
entry.target.classList.add('animate-fadeIn');
|
| 19 |
+
observer.unobserve(entry.target);
|
| 20 |
+
}
|
| 21 |
+
});
|
| 22 |
+
}, {
|
| 23 |
+
threshold: 0.1
|
| 24 |
+
});
|
| 25 |
+
|
| 26 |
+
sections.forEach(section => {
|
| 27 |
+
observer.observe(section);
|
| 28 |
+
section.classList.add('opacity-0', 'transition-opacity', 'duration-500');
|
| 29 |
+
});
|
| 30 |
+
};
|
| 31 |
+
|
| 32 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 33 |
+
animateOnScroll();
|
| 34 |
+
console.log('Cosmic Context Navigator loaded 🚀');
|
| 35 |
+
});
|
|
@@ -1,28 +1,32 @@
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
margin-top: 0;
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
margin: 0 auto;
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;400;600&display=swap');
|
| 2 |
+
|
| 3 |
body {
|
| 4 |
+
font-family: 'Inter', sans-serif;
|
| 5 |
+
scroll-behavior: smooth;
|
| 6 |
+
}
|
| 7 |
+
|
| 8 |
+
h1, h2, h3, h4, h5, h6 {
|
| 9 |
+
font-family: 'DM Sans', sans-serif;
|
| 10 |
}
|
| 11 |
|
| 12 |
+
.feather {
|
| 13 |
+
stroke-width: 1.5;
|
|
|
|
| 14 |
}
|
| 15 |
|
| 16 |
+
/* Custom scrollbar */
|
| 17 |
+
::-webkit-scrollbar {
|
| 18 |
+
width: 8px;
|
|
|
|
|
|
|
| 19 |
}
|
| 20 |
|
| 21 |
+
::-webkit-scrollbar-track {
|
| 22 |
+
background: #0a0b1a;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
}
|
| 24 |
|
| 25 |
+
::-webkit-scrollbar-thumb {
|
| 26 |
+
background: #4f46e5;
|
| 27 |
+
border-radius: 4px;
|
| 28 |
}
|
| 29 |
+
|
| 30 |
+
::-webkit-scrollbar-thumb:hover {
|
| 31 |
+
background: #6366f1;
|
| 32 |
+
}
|