Update documentation with overview and architecture

This commit is contained in:
rob
2026-01-05 03:44:38 -04:00
parent 5d2bea0b85
commit 32b77c3378
3873 changed files with 722247 additions and 6 deletions
@@ -0,0 +1,73 @@
@startuml
!theme plain
skinparam monochrome true
title SmartTools Web UI - Frontend Architecture & Revenue Strategy
package "Frontend Layers" {
[Landing Page] as LP
[Tool Browse/Search] as TB
[Tool Detail Pages] as TD
[Documentation] as DOC
[Publisher Dashboard] as PD
}
package "Revenue Components" {
[AdSense Integration] as ADS
[Content Marketing] as CONTENT
[Community Features] as COMM
[Premium Features] as PREM
}
package "Technical Stack" {
[Flask + Jinja] as BACKEND
[Tailwind CSS] as CSS
[Alpine.js for Interactivity] as JS
[Service Worker] as SW
}
LP --> ADS : Ad placement
TB --> ADS : Sidebar ads
DOC --> ADS : Between articles
LP --> CONTENT : Featured tools
TB --> CONTENT : Tool showcases
DOC --> CONTENT : Tutorials
TD --> COMM : Tool comments
PD --> COMM : User profiles
ADS --> BACKEND : Ad inventory
CONTENT --> BACKEND : CMS integration
COMM --> BACKEND : Forum backend
PREM --> BACKEND : Subscription logic
BACKEND --> CSS : Server-rendered templates
BACKEND --> JS : Alpine.js sprinkles
SW --> BACKEND : Offline caching
note right of ADS
Strategic placement:
- Search results between
- Tool listing sidebar
- Documentation bottom
- Mobile responsive units
end note
note right of CONTENT
Traffic drivers:
- Video tutorials (YouTube)
- Written tutorials
- Project showcases
- Case studies
end note
note right of COMM
Engagement:
- Tool discussions
- User profiles
- Contributor badges
- Project gallery
end note
@enduml
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

@@ -0,0 +1,72 @@
@startuml
!theme reddress-darkblue
title Overall System Diagram
actor "USERS" as Users
actor "Tool Publisher\n(Gitea account required)" as ToolPublisher
rectangle "smarttools CLI" as CLI
note right of CLI
- registry search
- registry install
- registry publish
- registry browse (TUI)
end note
rectangle "Web UI (future)" as WebUI
note right of WebUI
- Browse tools
- Search
- View tool details
end note
component "REGISTRY API SERVER\n(Flask/FastAPI)" as APIServer
note right of APIServer
<b>Host:</b> gitea.brrd.tech/api/registry
--
<b>Endpoints:</b>
- GET /tools
- GET /tools/search?q=...
- GET /tools/{name}
- GET /tools/{name}/download
- POST /tools (creates PR)
- GET /categories
- GET /stats
--
<b>Internal:</b>
- POST /webhook/gitea
- Sync job (pulls repo, updates DB)
end note
database "SQLite Database" as DB
note right of DB
- tools table
- categories
- download_stats
- search_index
end note
component "Gitea Repository\ngitea.brrd.tech/rob/SmartTools-Registry" as GiteaRepo
note right of GiteaRepo
/tools/
- summarize.yaml
- translate.yaml
- code-review.yaml
/index.json (auto-generated)
/categories.json
end note
Users --> CLI
Users --> WebUI
CLI --> APIServer : HTTPS
WebUI --> APIServer : HTTPS
APIServer --> DB : reads/writes
APIServer --> GiteaRepo : syncs with
ToolPublisher --> GiteaRepo : PR for new tools
GiteaRepo --> APIServer : webhook events
@enduml
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

@@ -0,0 +1,49 @@
@startuml
title Tool Registry Workflow
== A. Publishing a Tool ==
actor Developer as dev1
participant CLI as cli1
participant "API Server" as api1
participant Gitea as gitea1
dev1 -> cli1 : publish ./tool/
cli1 -> cli1 : validate locally
cli1 -> api1 : POST /tools
api1 -> gitea1 : Create branch
api1 -> gitea1 : Create PR
gitea1 --> api1 : PR URL
api1 --> cli1 : {"pr_url": "..."}
cli1 --> dev1 : "PR created, pending review"
== B. Installing a Tool ==
actor Developer as dev2
participant CLI as cli2
participant "API Server" as api2
participant "Local FS" as fs2
dev2 -> cli2 : install summarize
cli2 -> api2 : GET /tools/summarize
api2 --> cli2 : {config: "yaml..."}
cli2 -> fs2 : write config.yaml
cli2 -> fs2 : generate wrapper script
cli2 --> dev2 : "Installed summarize v1.2.0"
== C. Sync on Merge ==
actor Maintainer as maint
participant Gitea as gitea3
participant "API Server" as api3
participant Database as db3
maint -> gitea3 : Merge PR
gitea3 -> api3 : POST /webhook/gitea
api3 -> gitea3 : git pull
gitea3 --> api3 : (repo contents)
api3 -> api3 : parse tools/
api3 -> db3 : UPDATE tools
api3 -> db3 : rebuild search idx
@enduml
@@ -0,0 +1,41 @@
@startuml
title SmartTools Workflow
actor Developer as Dev
participant CLI
participant "API Server" as API
participant Gitea
database "Local FS" as FS
actor Maintainer
box "A. Publishing a Tool"
Dev -> CLI: publish ./tool/
CLI -> CLI: validate locally
CLI -> API: POST /tools
API -> Gitea: Create branch
API -> Gitea: Create PR
Gitea --> API: {"pr_url": "..."}
API --> CLI
CLI --> Dev: "PR created, pending review"
end box
box "B. Installing a Tool"
Dev -> CLI: install summarize
CLI -> API: GET /tools/summarize
API --> CLI: {config: "yaml..."}
CLI -> FS: write config.yaml
CLI -> FS: generate wrapper script
CLI --> Dev: "Installed summarize v1.2.0"
end box
box "C. Sync on Merge (keeping API in sync with repo)"
Maintainer -> Gitea: Merge PR
Gitea -> API: POST /webhook/gitea
API -> Gitea: git pull
Gitea --> API: (repo contents)
API -> API: parse tools/
API -> Database: UPDATE tools
API -> Database: rebuild search idx
end box
@enduml
@@ -0,0 +1,190 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1600" width="1200" height="1600">
<title>SmartTools Landing Page Mockup - Improved</title>
<!-- Page Background -->
<rect id="page-background" x="0" y="0" width="1200" height="1600" fill="#F9FAFB"/>
<!-- Header -->
<rect id="header-bar" x="0" y="0" width="1200" height="60" fill="#2C3E50"/>
<text id="site-logo" x="50" y="38" font-family="Arial, sans-serif" font-size="24" fill="#fff" font-weight="bold">SmartTools</text>
<g id="nav-links">
<text x="700" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Docs</text>
<text x="770" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Tutorials</text>
<text x="860" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Registry</text>
<text x="940" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Community</text>
<text x="1030" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">About</text>
<text x="1090" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Donate</text>
<!-- Search Icon -->
<circle cx="1150" cy="30" r="10" fill="none" stroke="#fff" stroke-width="2"/>
<line x1="1157" y1="37" x2="1165" y2="45" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- Main Content Area -->
<g id="main-content">
<!-- Hero Section -->
<rect id="hero-section" x="50" y="90" width="1100" height="280" fill="#FFFFFF" rx="10" ry="10" stroke="#E0E0E0" stroke-width="1"/>
<text x="100" y="150" font-family="Arial, sans-serif" font-size="36" fill="#333" font-weight="bold">Build Custom AI Commands in YAML</text>
<text x="100" y="190" font-family="Arial, sans-serif" font-size="18" fill="#666">Test</text>
<text x="100" y="215" font-family="Arial, sans-serif" font-size="18" fill="#666">Provider-agnostic and composable for ultimate flexibility.</text>
<!-- Install Snippet -->
<rect x="100" y="245" width="450" height="40" fill="#E0E0E0" rx="5" ry="5"/>
<text x="110" y="270" font-family="monospace" font-size="14" fill="#333">$ pip install smarttools &amp;&amp; smarttools init</text>
<!-- CTA Buttons -->
<rect x="100" y="300" width="180" height="45" fill="#6366F1" rx="5" ry="5"/>
<text x="120" y="328" font-family="Arial, sans-serif" font-size="16" fill="#fff" font-weight="bold">Get Started</text>
<rect x="300" y="300" width="180" height="45" fill="none" stroke="#06B6D4" stroke-width="2" rx="5" ry="5"/>
<text x="320" y="328" font-family="Arial, sans-serif" font-size="16" fill="#06B6D4" font-weight="bold">View Tutorials</text>
<!-- Why SmartTools Section (Three Pillars) -->
<text x="50" y="420" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Why SmartTools?</text>
<g id="three-pillars">
<!-- Pillar 1: Easy to Use -->
<rect x="50" y="450" width="350" height="150" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<circle cx="100" cy="490" r="20" fill="#6366F1"/>
<text x="90" y="498" font-family="Arial, sans-serif" font-size="18" fill="#fff" font-weight="bold">✓</text>
<text x="140" y="490" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Easy to Use</text>
<text x="60" y="520" font-family="Arial, sans-serif" font-size="14" fill="#666">Simple YAML configuration for quick setup.</text>
<!-- Pillar 2: Powerful -->
<rect x="425" y="450" width="350" height="150" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<circle cx="475" cy="490" r="20" fill="#06B6D4"/>
<text x="465" y="498" font-family="Arial, sans-serif" font-size="18" fill="#fff" font-weight="bold">⚡</text>
<text x="515" y="490" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Powerful</text>
<text x="435" y="520" font-family="Arial, sans-serif" font-size="14" fill="#666">Leverage any AI provider, compose complex workflows.</text>
<!-- Pillar 3: Community -->
<rect x="800" y="450" width="350" height="150" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<circle cx="850" cy="490" r="20" fill="#6366F1"/>
<text x="840" y="498" font-family="Arial, sans-serif" font-size="18" fill="#fff" font-weight="bold">👥</text>
<text x="890" y="490" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Community</text>
<text x="810" y="520" font-family="Arial, sans-serif" font-size="14" fill="#666">Share, discover, and contribute to a growing ecosystem.</text>
</g>
<!-- Featured Tools & Projects -->
<text x="50" y="650" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Featured Tools &amp; Projects</text>
<g id="featured-grid">
<!-- Tool Card 1 -->
<rect x="50" y="680" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<rect x="340" y="690" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
<text x="345" y="705" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
<circle cx="70" cy="700" r="10" fill="#6366F1"/>
<text x="90" y="705" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 1</text>
<text x="60" y="730" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
<text x="60" y="750" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: John Doe</text>
<text x="60" y="770" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 1.2K</text>
<rect x="60" y="790" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
<text x="65" y="807" font-family="monospace" font-size="12" fill="#333">smarttools run tool1</text>
<!-- Tool Card 2 -->
<rect x="425" y="680" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<rect x="715" y="690" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
<text x="720" y="705" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
<circle cx="445" cy="700" r="10" fill="#6366F1"/>
<text x="465" y="705" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 2</text>
<text x="435" y="730" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
<text x="435" y="750" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Jane Smith</text>
<text x="435" y="770" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 800</text>
<rect x="435" y="790" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
<text x="440" y="807" font-family="monospace" font-size="12" fill="#333">smarttools run tool2</text>
<!-- Tool Card 3 -->
<rect x="800" y="680" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<rect x="1090" y="690" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
<text x="1095" y="705" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
<circle cx="820" cy="700" r="10" fill="#6366F1"/>
<text x="840" y="705" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 3</text>
<text x="810" y="730" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
<text x="810" y="750" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Bob Johnson</text>
<text x="810" y="770" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 2.5K</text>
<rect x="810" y="790" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
<text x="815" y="807" font-family="monospace" font-size="12" fill="#333">smarttools run tool3</text>
<!-- Tool Card 4 -->
<rect x="50" y="880" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<rect x="340" y="890" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
<text x="345" y="905" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
<circle cx="70" cy="900" r="10" fill="#6366F1"/>
<text x="90" y="905" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 4</text>
<text x="60" y="930" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
<text x="60" y="950" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Alice Brown</text>
<text x="60" y="970" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 500</text>
<rect x="60" y="990" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
<text x="65" y="1007" font-family="monospace" font-size="12" fill="#333">smarttools run tool4</text>
<!-- Tool Card 5 -->
<rect x="425" y="880" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<rect x="715" y="890" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
<text x="720" y="905" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
<circle cx="445" cy="900" r="10" fill="#6366F1"/>
<text x="465" y="905" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 5</text>
<text x="435" y="930" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
<text x="435" y="950" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Charlie Green</text>
<text x="435" y="970" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 1.8K</text>
<rect x="435" y="990" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
<text x="440" y="1007" font-family="monospace" font-size="12" fill="#333">smarttools run tool5</text>
<!-- Tool Card 6 -->
<rect x="800" y="880" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<rect x="1090" y="890" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
<text x="1095" y="905" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
<circle cx="820" cy="900" r="10" fill="#6366F1"/>
<text x="840" y="905" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 6</text>
<text x="810" y="930" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
<text x="810" y="950" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: David White</text>
<text x="810" y="970" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 900</text>
<rect x="810" y="990" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
<text x="815" y="1007" font-family="monospace" font-size="12" fill="#333">smarttools run tool6</text>
</g>
<!-- Getting Started Section -->
<text x="50" y="1110" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Getting Started</text>
<g id="getting-started-cards">
<rect x="50" y="1140" width="350" height="120" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<text x="60" y="1165" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tutorial 1: Basic Setup</text>
<text x="60" y="1190" font-family="Arial, sans-serif" font-size="14" fill="#666">Learn how to install and configure SmartTools.</text>
<rect x="60" y="1205" width="100" height="25" fill="#6366F1" rx="3" ry="3"/>
<text x="65" y="1222" font-family="Arial, sans-serif" font-size="12" fill="#fff">Read More</text>
<rect x="425" y="1140" width="350" height="120" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<text x="435" y="1165" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tutorial 2: Your First Tool</text>
<text x="435" y="1190" font-family="Arial, sans-serif" font-size="14" fill="#666">Create a simple AI command in YAML.</text>
<rect x="435" y="1205" width="100" height="25" fill="#6366F1" rx="3" ry="3"/>
<text x="440" y="1222" font-family="Arial, sans-serif" font-size="12" fill="#fff">Read More</text>
<!-- Tutorial 3: Advanced Workflows -->
<rect x="800" y="1140" width="350" height="120" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<text x="810" y="1165" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tutorial 3: Advanced Workflows</text>
<text x="810" y="1190" font-family="Arial, sans-serif" font-size="14" fill="#666">Combine multiple tools for complex tasks.</text>
<rect x="810" y="1205" width="100" height="25" fill="#6366F1" rx="3" ry="3"/>
<text x="815" y="1222" font-family="Arial, sans-serif" font-size="12" fill="#fff">Read More</text>
</g>
<!-- Featured Contributor Section -->
<text x="50" y="1310" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Featured Contributor</text>
<rect x="50" y="1340" width="1100" height="100" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
<circle cx="100" cy="1390" r="30" fill="#D0D0D0"/>
<text x="100" y="1398" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#666">👤</text>
<text x="150" y="1380" font-family="Arial, sans-serif" font-size="20" fill="#333" font-weight="bold">Alice Wonderland</text>
<text x="150" y="1405" font-family="Arial, sans-serif" font-size="16" fill="#666">Creator of the "Image Captioning" tool and active community member.</text>
<rect x="150" y="1420" width="150" height="25" fill="#06B6D4" rx="3" ry="3"/>
<text x="155" y="1437" font-family="Arial, sans-serif" font-size="12" fill="#fff">View Profile</text>
</g>
<!-- Footer Ad Banner -->
<rect id="footer-ad" x="0" y="1520" width="1200" height="80" fill="#DBEAFE"/>
<text x="600" y="1565" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#666">Advertisement: Support SmartTools Development</text>
<!-- Define a subtle shadow filter -->
<defs>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="2"/>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

@@ -0,0 +1,63 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1600" viewBox="0 0 1200 1600">
<rect width="1200" height="1600" fill="#F9FAFB" />
<!-- Header -->
<rect x="80" y="40" width="1040" height="70" rx="10" fill="#FFFFFF" stroke="#E5E7EB" />
<text x="110" y="82" font-family="Arial" font-size="20" fill="#111827">SmartTools</text>
<text x="520" y="82" font-family="Arial" font-size="14" fill="#6B7280">Docs Tutorials Registry Community About Donate</text>
<rect x="980" y="55" width="120" height="40" rx="8" fill="#1D4ED8" />
<text x="1000" y="80" font-family="Arial" font-size="14" fill="#FFFFFF">Get Started</text>
<!-- Hero -->
<rect x="80" y="140" width="1040" height="280" rx="16" fill="#FFFFFF" stroke="#E5E7EB" />
<text x="120" y="190" font-family="Arial" font-size="28" fill="#111827">Build AI CLI tools in YAML. Compose them like Unix commands.</text>
<text x="120" y="220" font-family="Arial" font-size="16" fill="#6B7280">Provider-agnostic, shareable, and built for collaboration.</text>
<rect x="120" y="240" width="520" height="60" rx="8" fill="#0F172A" />
<text x="140" y="275" font-family="Courier New" font-size="16" fill="#E5E7EB">pip install -e . &amp;&amp; smarttools registry browse</text>
<rect x="120" y="320" width="170" height="44" rx="8" fill="#1D4ED8" />
<text x="142" y="348" font-family="Arial" font-size="14" fill="#FFFFFF">Browse Registry</text>
<rect x="310" y="320" width="170" height="44" rx="8" fill="#E5E7EB" />
<text x="335" y="348" font-family="Arial" font-size="14" fill="#111827">View Tutorials</text>
<!-- Pillars -->
<rect x="80" y="450" width="1040" height="170" rx="16" fill="#FFFFFF" stroke="#E5E7EB" />
<rect x="110" y="480" width="320" height="110" rx="12" fill="#F3F4F6" />
<rect x="440" y="480" width="320" height="110" rx="12" fill="#F3F4F6" />
<rect x="770" y="480" width="320" height="110" rx="12" fill="#F3F4F6" />
<text x="130" y="515" font-family="Arial" font-size="14" fill="#111827">Easy to Use</text>
<text x="460" y="515" font-family="Arial" font-size="14" fill="#111827">Powerful</text>
<text x="790" y="515" font-family="Arial" font-size="14" fill="#111827">Community</text>
<!-- Featured tools -->
<text x="80" y="670" font-family="Arial" font-size="18" fill="#111827">Featured Tools</text>
<rect x="80" y="690" width="1040" height="260" rx="16" fill="#FFFFFF" stroke="#E5E7EB" />
<!-- Cards -->
<rect x="110" y="720" width="300" height="200" rx="12" fill="#F9FAFB" stroke="#E5E7EB" />
<rect x="450" y="720" width="300" height="200" rx="12" fill="#F9FAFB" stroke="#E5E7EB" />
<rect x="790" y="720" width="300" height="200" rx="12" fill="#F9FAFB" stroke="#E5E7EB" />
<text x="130" y="755" font-family="Arial" font-size="13" fill="#111827">official/summarize</text>
<text x="130" y="780" font-family="Arial" font-size="12" fill="#6B7280">text-processing</text>
<text x="130" y="805" font-family="Arial" font-size="12" fill="#6B7280">⬇ 1,240</text>
<!-- Getting started -->
<text x="80" y="990" font-family="Arial" font-size="18" fill="#111827">Getting Started</text>
<rect x="80" y="1010" width="1040" height="170" rx="16" fill="#FFFFFF" stroke="#E5E7EB" />
<rect x="110" y="1040" width="320" height="110" rx="12" fill="#F3F4F6" />
<rect x="440" y="1040" width="320" height="110" rx="12" fill="#F3F4F6" />
<rect x="770" y="1040" width="320" height="110" rx="12" fill="#F3F4F6" />
<!-- Projects + Contributors -->
<text x="80" y="1220" font-family="Arial" font-size="18" fill="#111827">Featured Projects &amp; Contributors</text>
<rect x="80" y="1240" width="1040" height="190" rx="16" fill="#FFFFFF" stroke="#E5E7EB" />
<rect x="110" y="1270" width="500" height="130" rx="12" fill="#F3F4F6" />
<rect x="640" y="1270" width="450" height="130" rx="12" fill="#F3F4F6" />
<!-- Footer / Sponsored -->
<rect x="80" y="1460" width="1040" height="80" rx="10" fill="#FEF3C7" stroke="#FDE68A" />
<text x="100" y="1505" font-family="Arial" font-size="12" fill="#92400E">Sponsored</text>
<text x="180" y="1505" font-family="Arial" font-size="12" fill="#92400E">Ad slot (optional, footer only)</text>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB