90 lines
1.8 KiB
Plaintext
90 lines
1.8 KiB
Plaintext
@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 |