@startuml
!theme plain
skinparam defaultFontName Inter
skinparam backgroundColor #f8f9fa

package "Landing Page Layout" {
  component "Hero Section" as hero {
    [Value Prop: AI CLI tools for everyone] as value
    [Install Snippet (copy button)] as snippet
    [Primary CTA: Browse Tools] as primary
    [Secondary CTA: View Docs] as secondary
  }

  component "Value Proposition Grid" as grid {
    [Easy to Use\nBeginner-friendly] as easy
    [Powerful\nAdvanced features] as powerful
    [Community\nCollaboration] as community
  }

  component "Featured Tools" as tools {
    [Tool Card 1] as tool1
    [Tool Card 2] as tool2
    [Tool Card 3] as tool3
  }
  note right of tools: 6-8 tools grid

  component "Project Showcase" as projects {
    [Project Card 1] as proj1
    [Project Card 2] as proj2
    [Project Card 3] as proj3
  }
  note right of projects: Real usage examples

  component "Getting Started Preview" as getting {
    [Tutorial Links] as tutorials
    [Quick Start Guide] as guide
  }

  component "Footer" as footer {
    [Newsletter Signup] as newsletter
    [Navigation Links] as nav
    [Social Links] as social
  }
}

hero --> grid
grid --> tools
tools --> projects
projects --> getting
getting --> footer

note bottom of hero
  Mobile: Single column
  Desktop: Full width hero
end note

note bottom of footer
  Optional AdSense banner
  Newsletter: Minimal friction
end note
@enduml