Merge pull request #216 from Context-Engine-AI/feature/new-landing-page

feat(landing): add Self-Learning and Green Energy feature cards below…

Author: chris-stinemetz

src/app.scss

@@ -396,6 +396,58 @@ body::before {
 .c-str { color: #a5d6ff; }
 .c-num { color: #79c0ff; }
 
+/* Hero Visual Features */
+.hero-visual-features {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.visual-feature {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  backdrop-filter: blur(10px);
+}
+
+.visual-feature-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(45, 103, 255, 0.15);
+  border-radius: var(--radius);
+  color: #79c0ff;
+}
+
+.visual-feature-icon.green {
+  background: rgba(0, 184, 148, 0.15);
+  color: var(--accent);
+}
+
+.visual-feature-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.visual-feature-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.visual-feature-desc {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
 /* Graph Section */
 .graph-section {
   padding: 80px 48px;
@@ -869,6 +921,11 @@ body::before {
     padding: 16px;
     overflow-x: auto;
   }
+
+  /* Hero visual features */
+  .hero-visual-features {
+    grid-template-columns: 1fr;
+  }
 
   /* Graph section - vertical layout on mobile */
   .graph-section {

src/routes/+page.svelte

@@ -13,7 +13,9 @@
 		BookOpen,
 		GitBranch,
 		Bug,
-		Github
+		Github,
+		Brain,
+		Leaf
 	} from 'lucide-svelte';
 
 	// Form state
@@ -291,6 +293,27 @@ result = <span class="c-fn">repo_search</span>(
 )
 <span class="c-comment"># 4,456 sources -> 5 relevant in 47ms</span></pre>
 		</div>
+
+		<div class="hero-visual-features">
+			<div class="visual-feature">
+				<div class="visual-feature-icon">
+					<Brain size={20} />
+				</div>
+				<div class="visual-feature-text">
+					<span class="visual-feature-title">Self-Learning</span>
+					<span class="visual-feature-desc">Gets smarter as you search</span>
+				</div>
+			</div>
+			<div class="visual-feature">
+				<div class="visual-feature-icon green">
+					<Leaf size={20} />
+				</div>
+				<div class="visual-feature-text">
+					<span class="visual-feature-title">Green Energy</span>
+					<span class="visual-feature-desc">80% less compute per query</span>
+				</div>
+			</div>
+		</div>
 	</div>
 </section>