vectra-client 0.3.2 → 0.3.4

data/docs/assets/style.css

@@ -164,6 +164,40 @@ body {
   border-color: var(--tma-color-border-hover);
 }
 
+.tma-nav__toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+}
+
+.tma-nav__toggle-line {
+  width: 100%;
+  height: 2px;
+  background: var(--tma-color-text-primary);
+  border-radius: 2px;
+  transition: all var(--tma-transition-normal);
+  transform-origin: center;
+}
+
+.tma-nav__toggle[aria-expanded="true"] .tma-nav__toggle-line:nth-child(1) {
+  transform: rotate(45deg) translate(6px, 6px);
+}
+
+.tma-nav__toggle[aria-expanded="true"] .tma-nav__toggle-line:nth-child(2) {
+  opacity: 0;
+}
+
+.tma-nav__toggle[aria-expanded="true"] .tma-nav__toggle-line:nth-child(3) {
+  transform: rotate(-45deg) translate(6px, -6px);
+}
+
 /* ============================================
    Hero Section
    ============================================ */
@@ -751,8 +785,49 @@ code {
     padding: 0 var(--tma-spacing-md);
   }
   
+  .tma-nav__toggle {
+    display: flex;
+  }
+  
   .tma-nav__menu {
-    display: none;
+    display: flex;
+    position: fixed;
+    top: var(--tma-header-height);
+    left: 0;
+    right: 0;
+    height: 0;
+    max-height: 400px;
+    background: rgba(10, 10, 15, 0.98);
+    backdrop-filter: blur(12px);
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+    gap: var(--tma-spacing-xs);
+    transform: translateX(100%);
+    transition: transform var(--tma-transition-normal), opacity var(--tma-transition-normal), height var(--tma-transition-normal), padding var(--tma-transition-normal);
+    z-index: 999;
+    overflow-y: auto;
+    opacity: 0;
+    pointer-events: none;
+    border-top: 1px solid var(--tma-color-border);
+  }
+  
+  .tma-nav__menu.tma-nav__menu--open {
+    transform: translateX(0);
+    opacity: 1;
+    pointer-events: auto;
+    height: 400px;
+    padding: var(--tma-spacing-lg);
+  }
+  
+  .tma-nav__menu li {
+    width: 100%;
+  }
+  
+  .tma-nav__link {
+    width: 100%;
+    padding: var(--tma-spacing-md);
+    justify-content: flex-start;
   }
   
   .tma-hero {
@@ -925,3 +1000,153 @@ code {
   color: #ef4444;
   font-weight: bold;
 }
+
+/* ============================================
+   Dashboard Showcase
+   ============================================ */
+.tma-dashboard-showcase {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--tma-spacing-2xl);
+  margin: var(--tma-spacing-2xl) 0;
+  padding: var(--tma-spacing-xl);
+  background: var(--tma-color-bg-secondary);
+  border-radius: var(--tma-radius-lg);
+  border: 1px solid var(--tma-color-border);
+}
+
+.tma-dashboard-showcase__image {
+  position: relative;
+  border-radius: var(--tma-radius-md);
+  overflow: hidden;
+  box-shadow: var(--tma-shadow-lg);
+  background: var(--tma-color-bg-primary);
+  border: 1px solid var(--tma-color-border);
+}
+
+.tma-dashboard-screenshot {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: var(--tma-radius-md);
+  transition: transform var(--tma-transition-normal);
+}
+
+.tma-dashboard-showcase__image:hover .tma-dashboard-screenshot {
+  transform: scale(1.02);
+}
+
+.tma-dashboard-showcase__features {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tma-dashboard-showcase__features h4 {
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin-bottom: var(--tma-spacing-lg);
+  color: var(--tma-color-text-primary);
+}
+
+.tma-dashboard-showcase__features ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0 0 var(--tma-spacing-xl) 0;
+}
+
+.tma-dashboard-showcase__features li {
+  margin-bottom: var(--tma-spacing-md);
+  padding-left: var(--tma-spacing-lg);
+  position: relative;
+  color: var(--tma-color-text-secondary);
+  line-height: 1.6;
+}
+
+.tma-dashboard-showcase__features li::before {
+  content: '▸';
+  position: absolute;
+  left: 0;
+  color: var(--tma-color-accent-primary);
+  font-weight: bold;
+}
+
+.tma-dashboard-showcase__features strong {
+  color: var(--tma-color-text-primary);
+  font-weight: 600;
+}
+
+.tma-dashboard-showcase__actions {
+  display: flex;
+  gap: var(--tma-spacing-md);
+  flex-wrap: wrap;
+  margin-top: var(--tma-spacing-lg);
+}
+
+.tma-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tma-spacing-sm);
+  padding: var(--tma-spacing-md) var(--tma-spacing-lg);
+  border-radius: var(--tma-radius-md);
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: all var(--tma-transition-fast);
+  border: 1px solid transparent;
+}
+
+.tma-button--primary {
+  background: var(--tma-color-accent-primary);
+  color: #0a0a0f!important;
+  border-color: var(--tma-color-accent-primary);
+}
+
+.tma-button--primary:hover {
+  background: var(--tma-color-accent-light);
+  border-color: var(--tma-color-accent-light);
+  color: #0a0a0f!important;
+  transform: translateY(-1px);
+  box-shadow: var(--tma-shadow-md);
+}
+
+.tma-button--secondary {
+  background: transparent;
+  color: var(--tma-color-accent-primary);
+  border-color: var(--tma-color-accent-primary);
+}
+
+.tma-button--secondary:hover {
+  background: var(--tma-color-accent-muted);
+  border-color: var(--tma-color-accent-light);
+  color: var(--tma-color-accent-light);
+  transform: translateY(-1px);
+}
+
+/* Responsive Dashboard Showcase */
+@media (max-width: 1024px) {
+  .tma-dashboard-showcase {
+    grid-template-columns: 1fr;
+    gap: var(--tma-spacing-xl);
+  }
+  
+  .tma-dashboard-showcase__features {
+    order: -1;
+  }
+}
+
+@media (max-width: 768px) {
+  .tma-dashboard-showcase {
+    padding: var(--tma-spacing-md);
+    margin: var(--tma-spacing-lg) 0;
+  }
+  
+  .tma-dashboard-showcase__actions {
+    flex-direction: column;
+  }
+  
+  .tma-button {
+    width: 100%;
+    justify-content: center;
+  }
+}

data/docs/examples/index.md

@@ -48,7 +48,16 @@ Practical examples to get started with Vectra.
   </div>
 </div>
 
+## Real-World Examples
+
+<div class="tma-comparison-card">
+  <h4>Production Use Cases</h4>
+  <p>E-commerce search, RAG chatbots, multi-tenant SaaS, and batch processing</p>
+  <a href="{{ site.baseurl }}/examples/real-world/">View Examples →</a>
+</div>
+
 ## More Resources
 
 - [GitHub Examples](https://github.com/stokry/vectra/tree/main/examples) - Full example files
+- [Comprehensive Demo](https://github.com/stokry/vectra/tree/main/examples/comprehensive_demo.rb) - Complete feature demonstration
 - [Integration Tests](https://github.com/stokry/vectra/tree/main/spec/integration) - Real-world test cases