@startuml
!theme plain
skinparam backgroundColor #FFF
skinparam handwritten false

rectangle "Web UI Architecture" {
  rectangle "Tier 1: Ad-Supported Content" as T1 {
    [Landing]
    [Documentation]
    [Tutorials]
    [Examples]
    [Blog/Announcements]
  }
  
  rectangle "Tier 2: Ad-Free Registry" as T2 {
    [Tool Browse/Search]
    [Tool Details]
    [Categories]
    [Install Flows]
  }
  
  rectangle "Tier 3: Community (Light Ads)" as T3 {
    [Forum]
    [Contributors]
    [Featured Projects]
  }
  
  rectangle "Publisher Dashboard (Auth)" as PD {
    [Registration/Login]
    [Tool Management]
    [Token Management]
    [Settings]
  }
}

cloud "Revenue Streams" {
  [AdSense]
  [YouTube]
  [Donations]
  [Featured Listings]
  [Premium Tiers]
}

database "Backend" {
  [Registry API]
  [Content Pages]
  [Promotions]
  [Featured Projects]
}

T1 --> T2 : "Core Registry"
T2 --> T3 : "Community"
T1 --> PD : "Become Publisher"
T2 --> PD : "Manage Tools"

T1 --> AdSense
T1 --> YouTube
T1 --> Donations
T3 --> Featured Listings
PD --> Premium Tiers

T1 --> [Registry API]
T2 --> [Registry API]
T3 --> [Registry API]
PD --> [Registry API]

note right of T1
  Professional documentation
  Video tutorials
  Community engagement
end note

note right of T2
  Ad-free experience
  Fast performance
  Developer trust
end note

note right of Revenue Streams
  Sustainable income
  Fund project maintenance
  Enable future AI model hosting
  Support accessibility goals
end note

@enduml