@startuml
!define RECTANGLE class

skinparam componentStyle rectangle
skinparam backgroundColor #FEFEFE

package "Landing Page Architecture" {
  
  component "Hero Section" as hero {
    [Value Proposition]
    [Install Command]
    [Primary CTAs]
  }
  
  component "Quick Start" as quickstart {
    [3-Step Visual Guide]
  }
  
  component "Popular Tools" as popular {
    [6 Tool Cards]
    [API: GET /tools?sort=downloads&limit=6]
  }
  
  component "Why SmartTools" as why {
    [3 Pillars]
    [Easy | Powerful | Community]
  }
  
  component "Latest Tutorials" as tutorials {
    [3 Tutorial Cards]
    [API: GET /content/tutorials?limit=3]
  }
  
  component "Contributor Spotlight" as spotlight {
    [Monthly Featured Contributor]
  }
  
  component "Footer" as footer {
    [Navigation Links]
    [Donate CTA]
    [Social | Legal]
  }
  
  component "Ad Slots" as ads {
    [Sidebar (desktop only)]
    [Optional Footer Banner]
  }
  
  database "Registry API" as api
  cloud "AdSense" as adsense
  
  hero -down-> quickstart
  quickstart -down-> popular
  popular -down-> why
  why -down-> tutorials
  tutorials -down-> spotlight
  spotlight -down-> footer
  
  popular ..> api : lazy load
  tutorials ..> api : lazy load
  ads ..> adsense : async
  
  note right of hero
    Critical path:
    - FCP < 1.5s
    - TTI < 3s
    - No layout shift
  end note
  
  note right of popular
    API response cached:
    - 5 min server-side
    - ETag/Last-Modified
  end note
  
  note right of ads
    Load strategy:
    - Async after content
    - Reserved height
    - Fallback if blocked
  end note
}

package "Responsive Breakpoints" {
  [Mobile <640px] --> [Single column, ads hidden]
  [Tablet 640-1024px] --> [2-col optional, footer ads]
  [Desktop >1024px] --> [Full layout, sidebar ads]
}

@enduml