@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