From 16868f200d2e4758f563066c32cf120956fbc451 Mon Sep 17 00:00:00 2001 From: Lum1104 Date: Mon, 13 Apr 2026 21:30:57 +0800 Subject: [PATCH] redesign: full homepage refresh with gradient keywords, new problem section, and improved visual hierarchy - Hero: gradient "Understand" headline, badge pill, staggered entrance animations, star icon for GitHub - New Problem section: structure vs meaning comparison with hairball SVG and domain preview cards - Showcase: split into structural (table stakes) and business knowledge (star) with pill labels and feature tags - Features: 2-column layout with gradient icons and tighter copy - Install: copy-to-clipboard button - Footer: expanded with Live Demo link and updated tagline - Global: rose-gold-to-gold gradient tokens, .grad text utility Co-Authored-By: Claude Opus 4.6 (1M context) --- homepage/src/components/Features.astro | 54 +++--- homepage/src/components/Footer.astro | 18 +- homepage/src/components/Hero.astro | 178 ++++++++++++++++---- homepage/src/components/Install.astro | 54 +++++- homepage/src/components/Problem.astro | 220 +++++++++++++++++++++++++ homepage/src/components/Showcase.astro | 156 +++++++++++++++--- homepage/src/pages/index.astro | 4 +- homepage/src/styles/global.css | 14 ++ 8 files changed, 605 insertions(+), 93 deletions(-) create mode 100644 homepage/src/components/Problem.astro diff --git a/homepage/src/components/Features.astro b/homepage/src/components/Features.astro index c0df6ab..7784605 100644 --- a/homepage/src/components/Features.astro +++ b/homepage/src/components/Features.astro @@ -3,32 +3,32 @@ const features = [ { icon: '◈', title: 'Interactive Knowledge Graph', - description: 'Visualize files, functions, and dependencies as an explorable graph with hierarchical drill-down and smart layout.', + description: 'Explorable graph with hierarchical drill-down, smart layout, and community clustering.', }, { icon: '⬡', title: 'Beyond Code Analysis', - description: 'Analyze your entire project — Dockerfiles, Terraform, SQL, Markdown, and 26+ file types mapped into one unified graph.', + description: 'Dockerfiles, Terraform, SQL, Markdown, and 26+ file types in one unified graph.', }, { icon: '⊘', title: 'Smart Filtering & Search', - description: 'Filter by node type, complexity, layer, or edge category. Fuzzy and semantic search to find anything instantly.', + description: 'Filter by type, complexity, or layer. Fuzzy and semantic search to find anything.', }, { icon: '⎙', title: 'Export & Share', - description: 'Export your knowledge graph as high-quality PNG, SVG, or filtered JSON — ready for docs, presentations, or further analysis.', + description: 'High-quality PNG, SVG, or filtered JSON for docs, presentations, or analysis.', }, { icon: '⟿', title: 'Dependency Path Finder', - description: 'Find the shortest path between any two components. Understand how parts of your system connect at a glance.', + description: 'Shortest path between any two components. See how your system connects.', }, { icon: '⟐', title: 'Guided Tours & Onboarding', - description: 'AI-generated walkthroughs that teach the codebase step by step, plus onboarding guides for new team members.', + description: 'AI-generated walkthroughs that teach the codebase step by step.', }, ]; --- @@ -36,10 +36,12 @@ const features = [
{features.map((f, i) => ( -
- {f.icon} -

{f.title}

-

{f.description}

+
+ {f.icon} +
+

{f.title}

+

{f.description}

+
))}
@@ -47,43 +49,48 @@ const features = [ diff --git a/homepage/src/components/Install.astro b/homepage/src/components/Install.astro index 2dc3dff..8d18c67 100644 --- a/homepage/src/components/Install.astro +++ b/homepage/src/components/Install.astro @@ -1,12 +1,19 @@
-

Get started in 30 seconds

+

Get started in 30 seconds.

Claude Code +
- 
/plugin marketplace add Lum1104/Understand-Anything
+      
/plugin marketplace add Lum1104/Understand-Anything
 /plugin install understand-anything
 /understand
@@ -14,14 +21,30 @@
+ + diff --git a/homepage/src/components/Showcase.astro b/homepage/src/components/Showcase.astro index 13071b7..1510079 100644 --- a/homepage/src/components/Showcase.astro +++ b/homepage/src/components/Showcase.astro @@ -3,14 +3,23 @@ const structuralVideoUrl = import.meta.env.VITE_STRUCTURAL_VIDEO_URL; const domainVideoUrl = import.meta.env.VITE_DOMAIN_VIDEO_URL; --- -
-

Explore the structural graph

-

Navigate your codebase as an interactive knowledge graph — click, search, and explore every file, function, and class.

+ +
+ Structural View +

+ Yes, we do structure too +

+

+ Explore every file, function, and dependency as an interactive graph. + Click to drill down, search to find anything, filter by type or complexity. + But that's just the map — not the story. +

+ Structural Graph
{structuralVideoUrl ? (
+
+ Hierarchical drill-down + Fuzzy search + Filter by type + 26+ file types +
+
-

Understand business logic

-

Switch to the domain view and see how your code maps to real business processes.

-
+ +
+ Business Knowledge Mode +

+ Now see what the code is for +

+

+ This is what makes us different. Switch to business knowledge mode and watch + your code transform into something readable — authentication flows, + payment pipelines, user lifecycles. Not files and functions. + Domains, processes, and the logic that drives your product. +

+
+ Business Knowledge Graph
{domainVideoUrl ? (
+
+ Domain mapping + Business flows + Process steps + AI-generated tours +
diff --git a/homepage/src/pages/index.astro b/homepage/src/pages/index.astro index c737fb6..569b5d7 100644 --- a/homepage/src/pages/index.astro +++ b/homepage/src/pages/index.astro @@ -2,15 +2,17 @@ import Layout from '../layouts/Layout.astro'; import Nav from '../components/Nav.astro'; import Hero from '../components/Hero.astro'; +import Problem from '../components/Problem.astro'; import Showcase from '../components/Showcase.astro'; import Features from '../components/Features.astro'; import Install from '../components/Install.astro'; import Footer from '../components/Footer.astro'; --- - +