From 612fe605c6226347f36ad9330c6b95a94ba482f4 Mon Sep 17 00:00:00 2001 From: hallelx2 Date: Sun, 21 Jun 2026 00:33:02 +0100 Subject: [PATCH] style: redesign blog page with grid borders, serif display titles, and precision schematics --- apps/blogs/app/page.tsx | 431 ++++++++++++++++++++++------------------ 1 file changed, 235 insertions(+), 196 deletions(-) diff --git a/apps/blogs/app/page.tsx b/apps/blogs/app/page.tsx index f680adb..e48b395 100644 --- a/apps/blogs/app/page.tsx +++ b/apps/blogs/app/page.tsx @@ -12,7 +12,8 @@ import { BookOpen, Terminal, ChevronRight, - Menu + Menu, + ArrowUpRight } from 'lucide-react'; import { VectorlessIcon, VectorlessDot } from './VectorlessIcon'; @@ -151,61 +152,106 @@ const BLOG_POSTS: BlogPost[] = [ } ]; -// Technical blueprint vectors +// High-fidelity blueprint schematic visualizations function BlueprintIllustration({ type }: { type: BlogPost['imageType'] }) { - if (type === 'architecture') { - return ( - - - - - - - - - - - - - - - - ); - } - if (type === 'database') { - return ( - - - - - - - - - - - ); - } - if (type === 'code') { - return ( - - - - - - - - - ); - } return ( - - - - - - - +
+ {/* Schematic coordinate lines */} +
+
SYS_REF // X_01
+
SCALE // 1:1.0
+
+
+
+ + {type === 'architecture' && ( + + {/* Main Tree structure */} + + + + + + {/* Node representation */} + + + + + + {/* Target points */} + + + TARGET + + {/* Tree branch outlines */} + + node.root + + )} + + {type === 'database' && ( + + {/* Coordinate grid */} + + + {/* DB Cylinder shapes */} + + + + + + + + {/* Index label indicator */} + + + v_index + + + )} + + {type === 'code' && ( + + {/* Code Window Border */} + + + {/* Custom syntax drawing */} + + {/* Header / Dots */} + + + + + {/* Lines */} + + + + + + + + )} + + {type === 'benchmark' && ( + + {/* Axis lines */} + + + + {/* Performance Curves */} + + + + {/* Interactive target dots */} + + + + {/* Grid annotations */} + + 94.2% ACC + + )} +
); } @@ -231,20 +277,6 @@ export default function BlogPage() { return () => window.removeEventListener('scroll', handleScroll); }, []); - const openSandbox = () => { - setIngestionStep(0); - setRetrievedResult(null); - setHighlightedSection(null); - setShowDemoModal(true); - }; - - const selectDoc = (docId: typeof selectedDoc) => { - setIngestionStep(0); - setRetrievedResult(null); - setHighlightedSection(null); - setSelectedDoc(docId); - }; - // Ingestion simulation steps useEffect(() => { if (showDemoModal) { @@ -260,6 +292,20 @@ export default function BlogPage() { } }, [showDemoModal, selectedDoc]); + const openSandbox = () => { + setIngestionStep(0); + setRetrievedResult(null); + setHighlightedSection(null); + setShowDemoModal(true); + }; + + const selectDoc = (docId: typeof selectedDoc) => { + setIngestionStep(0); + setRetrievedResult(null); + setHighlightedSection(null); + setSelectedDoc(docId); + }; + // Handle mock retrieval const handleRetrieve = (e: React.FormEvent) => { e.preventDefault(); @@ -321,9 +367,9 @@ export default function BlogPage() {
{/* Decorative gradient overlay matching landing page */} -
+
- {/* Grid Backdrop (Only visible on main index page) */} + {/* Grid Backdrop */} {!activeArticle && (
)} @@ -388,98 +434,93 @@ export default function BlogPage() { {/* Main Container */} -
+
{activeArticle ? ( - /* FULL PAGE ARTICLE READER VIEW (Sleek Clean Canvas, Minimal Grid) */ + /* EDITORIAL FULL PAGE READER VIEW */ -
+
{activeArticle.category} - • + / {activeArticle.date} - • + / {activeArticle.readTime}
-

+

{activeArticle.title}

- {/* Author Row */} -
-
- {activeArticle.author.name} -
-
- {activeArticle.author.name} - {activeArticle.author.role} -
-
- - {/* Blueprint Illustration Card */} -
-
- + {/* Author & Info bar */} +
+
+
+ {activeArticle.author.name} +
+
+ {activeArticle.author.name} + {activeArticle.author.role} +
+ + + Log // {activeArticle.id}.txt +
- {/* Article Content */} -
+ {/* Editorial Content Layout */} +
{activeArticle.content.map((paragraph, pIdx) => { if (/^\d+\.\s/.test(paragraph)) { const parts = paragraph.split(/^\d+\.\s/); const titleAndText = parts[1].split(/:\s/); return ( -
+
{titleAndText.length > 1 ? ( <> -

{titleAndText[0]}

-

{titleAndText[1]}

+

{titleAndText[0]}

+

{titleAndText[1]}

) : ( -

{parts[1]}

+

{parts[1]}

)}
); } return ( -

+

{paragraph}

); })}
- {/* Back to Library Index */} -
+ {/* Back to Index Navigation */} +
- - - File: {activeArticle.id}.log -
) : ( - /* MAGAZINE LIST VIEW */ + /* PREMIUM EDITORIAL INDEX LAYOUT */ - {/* Hero Header matching landing page style */} -
-
-
- + {/* Massive Newspaper Editorial Header */} +
+
+
+ - + - + Vectorless Intelligence Log
-

- Document retrieval for the - - - reasoning era. - - {/* Underline vector */} - - - - - +

+ Document retrieval for the reasoning era.

-

- Deep dives, engineering specifications, and core performance analyses of structure-preserving retrieval architectures. +

+ A technical journal examining the design of structure-preserving retrieval architectures, no-chunking models, and deterministic RAG systems.

- {/* Categories Navigation Bar */} -
-
+ {/* Categories Navigation Bar - Sticky pill outline style */} +
+
{categories.map((cat) => { const isActive = selectedCategory === cat; return (
- {/* Featured Article Layout */} + {/* Featured Headline Section (Split Grid Layout) */} {selectedCategory === 'All' && featuredPost && ( setActiveArticle(featuredPost)} - className="py-12 border-b border-[#E5E7EB] cursor-pointer group" + className="py-16 border-b border-border-gray cursor-pointer group/hero" > -
-
+
+
-
+
{featuredPost.category} • {featuredPost.date} @@ -572,22 +603,22 @@ export default function BlogPage() { {featuredPost.readTime}
-

+

{featuredPost.title}

-

+

{featuredPost.snippet}

-
- Analyze Specification - +
+ Analyze Article +
-
+
@@ -595,9 +626,9 @@ export default function BlogPage() { )} - {/* Post Grid List */} + {/* Grid-based Newspaper List View (Thin border divisions, no card shadows) */}
-
+
{displayPosts.map((post, idx) => ( setActiveArticle(post)} - className="flex flex-col justify-between cursor-pointer group h-full pb-8 border-b border-[#E5E7EB]" + className="flex flex-col justify-between cursor-pointer group/card h-full p-8 border-r border-b border-border-gray hover:bg-[#FAF8F5]/30 transition-colors duration-300" > -
-
- {post.category} - {post.date} +
+
+ {/* Eyebrow / meta info */} +
+ {post.category} + {post.date} +
+ + {/* Headline */} +

+ {post.title} +

+ + {/* Short Intro */} +

+ {post.snippet} +

-

- {post.title} -

- -

- {post.snippet} -

-
- -
- -
- -
-
- {post.author.name} + {/* Render fine blueprint drawing card */} +
+
-
- {post.author.name} - {post.author.role} + + {/* Author line */} +
+
+ {post.author.name} +
+
+ {post.author.name} + {post.author.role} +
))} - - {displayPosts.length === 0 && ( -
- No matching logs found - -
- )}
+ + {/* Empty State */} + {displayPosts.length === 0 && ( +
+ No matching logs found + +
+ )}
- {/* Footer */} + {/* Newspaper Footer */}