const actions value:[
  { id:"start" label:"Get started" variant:"solid" },
  { id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"media-split-section" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
  Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:16 } align:"center" minH:"vh-0"
    Box show:{ xs:false md:true } bg:"softMuted" rounded:"xl" p:8 minH:96
      Flex direction:"column" align:"center" justify:"center" gap:3 minH:80
        Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
        Text size:"sm" color:"muted"
          "Image placeholder"
    Flex direction:"column" align:{ xs:"center" md:"start" } gap:5
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Boost your productivity with our to-do app"
      Text size:"lg" color:"muted"
        "Plan important work, keep every priority visible, and move through the day with confidence."
      Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
        each in:actions as:action key:action.id
          Button variant:action.variant size:"lg" rounded:"full" w:"full"
            "{action.label}"
      Flex align:"center" gap:3 show:{ xs:false sm:true }
        each in:actions as:action key:action.id
          Button variant:action.variant size:"lg" rounded:"full"
            "{action.label}"
      Box show:{ xs:true md:false } bg:"softMuted" rounded:"xl" p:8 minH:72 w:"full"
        Flex direction:"column" align:"center" justify:"center" gap:3 minH:56
          Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
          Text size:"sm" color:"muted"
            "Image placeholder"

const benefits value:[
  { id:"focus" label:"Keep every priority in one clear view" },
  { id:"progress" label:"See meaningful progress as work moves forward" },
]
Section id:"media-benefits-section" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
  Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:16 } align:"center" minH:"vh-0"
    Box show:{ xs:false md:true } bg:"softMuted" p:8 minH:"vh-0"
      Flex direction:"column" align:"center" justify:"center" gap:3 minH:"vh-16"
        Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
        Text size:"sm" color:"muted"
          "Image placeholder"
    Flex direction:"column" align:{ xs:"center" md:"start" } gap:6
      Grid columns:1 gap:3
        Title size:{ xs:"3xl" md:"5xl" } weight:"black"
          "Boost your productivity with our to-do app"
        Text size:"lg" color:"muted"
          "Bring tasks, decisions, and daily momentum into one dependable workspace."
      Grid columns:1 gap:4 w:"full"
        each in:benefits as:benefit key:benefit.id
          Flex align:"center" gap:4
            Box bg:"softMuted" rounded:"full" w:12 h:12 p:2
              Icon name:"gallery-bold-duotone" fill:"muted" w:7 h:7
            Text color:"muted"
              "{benefit.label}"
      Box show:{ xs:true md:false } bg:"softMuted" p:8 minH:72 w:"full"
        Flex direction:"column" align:"center" justify:"center" gap:3 minH:56
          Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
          Text size:"sm" color:"muted"
            "Image placeholder"

const paragraphs value:[
  { id:"collaboration" content:"A visual guide helps every contributor shape the same outcome together." },
  { id:"clarity" content:"Everyone can see how the finished product will work before launch." },
]
Section id:"device-showcase-section" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
  Grid columns:{ xs:1 md:2 } gap:{ xs:10 md:16 } align:"center" minH:"vh-0"
    Flex direction:"column" align:{ xs:"center" md:"start" } gap:6
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Boost your productivity with our to-do app"
      Grid columns:1 gap:4
        each in:paragraphs as:paragraph key:paragraph.id
          Text size:"lg" color:"muted"
            "{paragraph.content}"
      Button variant:"ghost" iconEnd:"arrow-right"
        "Learn more"
    Box bg:"softMuted" rounded:"xl" p:{ xs:4 md:6 } w:"full"
      Box bg:"surface" border:1 borderColor:"muted" rounded:"lg" minH:{ xs:56 md:96 } p:6
        Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:44 md:80 }
          Icon name:"laptop-bold-duotone" fill:"muted" w:16 h:16
          Text size:"sm" color:"muted"
            "Device placeholder"

const features value:[
  { id:"one" title:"Feature one" description:"Web design and engineering stay aligned across the product workflow." },
  { id:"two" title:"Feature two" description:"Fast prototypes expose assumptions before implementation begins." },
]
Section id:"feature-media-section" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
  Grid columns:{ xs:1 md:2 } gap:{ xs:10 md:16 } align:"center" minH:"vh-0"
    Grid columns:1 gap:{ xs:8 md:12 }
      each in:features as:feature key:feature.id
        Flex direction:"column" align:{ xs:"center" md:"start" } gap:3
          Box bg:"softMuted" rounded:"full" w:12 h:12 p:2
            Icon name:"gallery-bold-duotone" fill:"muted" w:7 h:7
          Title size:"xl" weight:"black"
            "{feature.title}"
          Text color:"muted"
            "{feature.description}"
    Box bg:"softMuted" rounded:"xl" p:8 minH:{ xs:72 md:96 }
      Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:56 md:80 }
        Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
        Text size:"sm" color:"muted"
          "Image placeholder"

const actions value:[
  { id:"start" label:"Get started" variant:"solid" },
  { id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"centered-media-cta-section" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
  Flex direction:"column" align:"center" gap:{ xs:8 md:12 } minH:"vh-0"
    Flex direction:"column" align:"center" gap:5 maxW:96
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Boost your productivity with our to-do app"
      Text size:"lg" color:"muted"
        "Turn plans into a calm, visible workflow that keeps the whole team moving together."
      Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
        each in:actions as:action key:action.id
          Button variant:action.variant size:"lg" rounded:"full" w:"full"
            "{action.label}"
      Flex align:"center" justify:"center" gap:3 show:{ xs:false sm:true }
        each in:actions as:action key:action.id
          Button variant:action.variant size:"lg" rounded:"full"
            "{action.label}"
    Box bg:"softMuted" rounded:"xl" p:8 minH:{ xs:72 md:96 } w:"full"
      Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:56 md:80 }
        Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
        Text size:"sm" color:"muted"
          "Image placeholder"

const features value:[
  { id:"one" title:"Feature one" description:"A shared visual guide gives every contributor a clear place to add input." },
  { id:"two" title:"Feature two" description:"Concise milestones keep the team focused on what customers need next." },
]
Section id:"video-features-section" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
  Grid columns:{ xs:1 md:2 } gap:{ xs:10 md:16 } align:"center" minH:"vh-0"
    Box show:{ xs:false md:true } bg:"softMuted" rounded:"xl" p:8 minH:96
      Flex direction:"column" align:"center" justify:"center" gap:3 minH:80
        Icon name:"play-circle-bold-duotone" fill:"muted" w:16 h:16
        Text size:"sm" color:"muted"
          "Video placeholder"
    Flex direction:"column" align:{ xs:"center" md:"start" } gap:7
      Text size:"lg" color:"muted"
        "A visual guide helps designers, developers, customers, and managers shape the same outcome together."
      Grid columns:1 gap:6
        each in:features as:feature key:feature.id
          Grid columns:1 gap:2
            Title size:"2xl" weight:"black"
              "{feature.title}"
            Text color:"muted"
              "{feature.description}"
      Box show:{ xs:true md:false } bg:"softMuted" rounded:"xl" p:8 minH:72 w:"full"
        Flex direction:"column" align:"center" justify:"center" gap:3 minH:56
          Icon name:"play-circle-bold-duotone" fill:"muted" w:16 h:16
          Text size:"sm" color:"muted"
            "Video placeholder"

const features value:[
  { id:"mobile" title:"Mobile app" description:"A focused mobile experience that keeps important work close at hand." },
  { id:"desktop" title:"Desktop app" description:"A spacious desktop workspace designed for productive daily routines." },
  { id:"users" title:"Multiple users" description:"Invite teammates and coordinate shared work from one clear place." },
  { id:"integrations" title:"Integrations" description:"Connect the tools your team already uses without adding extra friction." },
  { id:"reports" title:"Monthly reports" description:"Turn activity into a concise summary that makes progress easy to review." },
  { id:"permissions" title:"Granular permissions" description:"Give every collaborator the access they need and nothing they do not." },
]
Section id:"centered-feature-cards" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Browse our set of features"
      Text size:"lg" color:"muted"
        "Explore a flexible set of capabilities designed for teams, products, and growing businesses."
    Grid columns:{ xs:1 md:3 } gap:5
      each in:features as:feature key:feature.id
        Card variant:"outlined" scheme:"muted" rounded:"xl" p:{ xs:6 md:8 } minH:64
          Flex direction:"column" align:"center" justify:"center" gap:4 minH:48
            Box bg:"softMuted" rounded:"lg" p:3
              Icon name:"gallery-bold-duotone" fill:"muted" w:9 h:9
            Title size:"xl" weight:"black"
              "{feature.title}"
            Text color:"muted"
              "{feature.description}"

const products value:[
  { id:"mobile" title:"Mobile app" description:"A focused experience for work on the go." },
  { id:"desktop" title:"Desktop app" description:"A complete workspace for larger screens." },
  { id:"users" title:"Multiple users" description:"Shared tools for coordinated teams." },
  { id:"integrations" title:"Integrations" description:"Useful connections for everyday workflows." },
]
Section id:"media-grid-cards" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Browse our set of features"
      Text size:"lg" color:"muted"
        "Choose a starting point and shape it around the way your team prefers to work."
    Grid columns:{ xs:1 sm:2 md:4 } gap:5
      each in:products as:product key:product.id
        Card variant:"outlined" scheme:"muted" rounded:"xl" p:4
          Grid columns:1 gap:4
            Box bg:"softMuted" rounded:"lg" minH:44 p:6
              Flex align:"center" justify:"center" minH:32
                Icon name:"gallery-bold-duotone" fill:"muted" w:14 h:14
            Grid columns:1 gap:2
              Title size:"lg" weight:"black"
                "{product.title}"
              Text color:"muted"
                "{product.description}"

const products value:[
  { id:"mobile" title:"Mobile app" },
  { id:"desktop" title:"Desktop app" },
  { id:"users" title:"Multiple users" },
  { id:"integrations" title:"Integrations" },
]
Section id:"product-carousel-cards" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:{ xs:8 md:10 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Popular products"
      Text size:"lg" color:"muted"
        "A compact catalog row for highlighting the products people explore most often."
    Flex align:"center" gap:4
      IconButton icon:"alt-arrow-left" label:"Previous products" variant:"ghost" show:{ xs:false md:true }
      Grid columns:{ xs:1 sm:2 md:4 } gap:5 w:"full"
        each in:products as:product key:product.id
          Card variant:"outlined" scheme:"muted" rounded:"lg"
            Box bg:"softMuted" minH:44 p:6
              Flex align:"center" justify:"center" minH:32
                Icon name:"gallery-bold-duotone" fill:"muted" w:14 h:14
            Box p:5
              Title size:"lg" weight:"black"
                "{product.title}"
      IconButton icon:"alt-arrow-right" label:"Next products" variant:"ghost" show:{ xs:false md:true }
    Flex justify:"center"
      Button rounded:"full" size:"lg"
        "See more"

const features value:[
  { id:"mobile" title:"Mobile app" description:"Keep projects moving with a clear experience designed for smaller screens." },
  { id:"desktop" title:"Desktop app" description:"Give focused work more room with a fast and familiar desktop workspace." },
  { id:"users" title:"Multiple users" description:"Bring teammates together with shared context, ownership, and visibility." },
  { id:"integrations" title:"Integrations" description:"Connect everyday tools and keep important information moving between them." },
  { id:"reports" title:"Monthly reports" description:"Summarize activity and highlight the progress that matters to stakeholders." },
  { id:"permissions" title:"Granular permissions" description:"Control access with clear roles that stay manageable as the team grows." },
]
Section id:"action-cards" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Browse our set of features"
      Text size:"lg" color:"muted"
        "A responsive collection of feature summaries with a clear next step on every card."
    Grid columns:{ xs:1 md:3 } gap:5
      each in:features as:feature key:feature.id
        Card variant:"outlined" scheme:"muted" rounded:"xl" p:{ xs:6 md:8 } minH:72
          Flex direction:"column" align:"start" justify:"between" gap:5 minH:56
            Grid columns:1 gap:4
              Box bg:"softMuted" rounded:"lg" p:3 w:14
                Icon name:"gallery-bold-duotone" fill:"muted" w:8 h:8
              Title size:"xl" weight:"black"
                "{feature.title}"
              Text color:"muted"
                "{feature.description}"
            Button variant:"ghost" size:"sm" iconEnd:"arrow-right"
              "Learn more"

const supportingFeatures value:[
  { id:"desktop" title:"Desktop app" description:"A roomy workspace for focused work and complex projects." },
  { id:"users" title:"Multiple users" description:"Shared context and simple collaboration for every teammate." },
]
Section id:"bento-cards" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Browse our set of features"
      Text size:"lg" color:"muted"
        "Use a strong lead card and compact supporting cards to create a clear visual hierarchy."
    Grid columns:{ xs:1 md:2 } gap:5
      Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:6 md:8 } minH:80
        Flex direction:"column" align:"center" justify:"end" gap:5 minH:64
          Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
          Title size:"xl" weight:"black"
            "Mobile app"
          Text color:"muted"
            "A focused mobile experience for customers and teams wherever their work happens."
          Button variant:"ghost" size:"sm" iconEnd:"arrow-right"
            "Learn more"
      Grid columns:1 gap:5
        each in:supportingFeatures as:feature key:feature.id
          Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:6 md:8 } minH:52
            Grid columns:{ xs:1 sm:2 } gap:5 align:"center"
              Flex direction:"column" align:"start" gap:4
                Title size:"xl" weight:"black"
                  "{feature.title}"
                Text color:"muted"
                  "{feature.description}"
                Button variant:"ghost" size:"sm" iconEnd:"arrow-right"
                  "Learn more"
              Flex align:"center" justify:"center"
                Icon name:"gallery-bold-duotone" fill:"muted" w:14 h:14

const features value:[
  { id:"mobile" number:"01" title:"Mobile app" description:"A focused mobile experience for work that needs to move with you." },
  { id:"desktop" number:"02" title:"Desktop app" description:"A complete desktop workspace with room for productive daily routines." },
  { id:"users" number:"03" title:"Multiple users" description:"Simple collaboration that keeps ownership and progress visible to everyone." },
  { id:"integrations" number:"04" title:"Integrations" description:"Useful connections that reduce repetitive work across the tools you trust." },
  { id:"reports" number:"05" title:"Monthly reports" description:"Clear summaries that turn ongoing activity into understandable progress." },
  { id:"permissions" number:"06" title:"Granular permissions" description:"Practical access controls that stay manageable while your organization grows." },
]
Section id:"numbered-cards" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Title size:{ xs:"3xl" md:"5xl" } weight:"black"
        "Browse our set of features"
      Text size:"lg" color:"muted"
        "Guide readers through a sequence with large numbers and concise supporting copy."
    Grid columns:{ xs:1 md:3 } gap:5
      each in:features as:feature key:feature.id
        Card variant:"outlined" scheme:"muted" rounded:"xl" p:{ xs:6 md:8 } minH:64
          Flex direction:"column" align:"center" justify:"center" gap:3 minH:48
            Title size:"5xl" weight:"black" color:"muted"
              "{feature.number}"
            Title size:"xl" weight:"black"
              "{feature.title}"
            Text color:"muted"
              "{feature.description}"

const supportingProducts value:[
  { id:"desktop" title:"Desktop app" },
  { id:"users" title:"Multiple users" },
]
Section id:"spotlight-cards" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
  Grid columns:{ xs:1 md:3 } gap:5 align:"stretch"
    Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:7 md:10 } minH:80
      Flex direction:"column" align:"center" justify:"center" gap:5 minH:64
        Text size:"xs" weight:"bold" spacing:"widest" color:"muted"
          "TAGLINE"
        Title size:{ xs:"3xl" md:"5xl" } weight:"black"
          "Mobile app"
        Text size:"lg" color:"muted"
          "A focused product message with enough room for supporting copy and one clear action."
        Button rounded:"full" size:"lg"
          "See more"
    each in:supportingProducts as:product key:product.id
      Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:7 md:8 } minH:80
        Flex direction:"column" align:"center" justify:"center" gap:6 minH:64
          Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
          Title size:"xl" weight:"black"
            "{product.title}"