const customerBenefits:
  value:[
    {
      id:"connect"
      title:"Easy to Connect"
      description:"Bring every onboarding step together so new customers always know what comes next."
      preview:"Create Free Account"
    },
    {
      id:"dashboard"
      title:"Realtime Dashboard"
      description:"See campaign activity, schedules, and customer progress in one responsive dashboard."
      preview:"Review Live Progress"
    },
    {
      id:"automation"
      title:"Easy Automations"
      description:"Connect the tools your team already trusts and automate repetitive customer work."
      preview:"Launch an Automation"
    },
  ]
Section id:"customer-centric-features" bg:"surface" color:"surfaceText" boxed:true py:{ xs:8 md:12 }
  Flex direction:"column" align:"center" gap:0
    Flex direction:"column" align:"center" gap:0 show:{ xs:false md:true }
      Title size:"5xl" weight:"black"
        "Build a customer-centric"
      Title size:"5xl" weight:"black"
        "marketing strategy"
    Title size:"4xl" weight:"black" show:{ xs:true md:false }
      "Build a customer-centric marketing strategy"
    Box h:4
    Text size:"lg" color:"muted"
      "Connect every customer touchpoint with a clear, measurable workflow."
    Box h:{ xs:8 md:14 }
    Grid columns:{ xs:1 md:3 } gap:5 w:"full"
      each in:customerBenefits as:benefit key:benefit.id
        Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:5 md:6 } minH:80
          Flex direction:"column" gap:4 minH:64
            Box bg:"softPrimary" rounded:"full" w:14 h:14 p:2
              Icon name:"route-line-duotone" fill:"primary" w:10 h:10
            Grid columns:1 gap:2 minH:20
              Title size:"lg" weight:"black"
                "{benefit.title}"
              Text color:"muted"
                "{benefit.description}"
            Box h:2
            Box bg:"surface" rounded:"lg" p:4 shadow:"sm" minH:28
              Grid columns:1 gap:3
                Flex align:"center" gap:3
                  Icon name:"check-circle-bold" fill:"success" w:6 h:6
                  Text weight:"bold"
                    "{benefit.preview}"
                Grid columns:3 gap:2
                  Box h:8 bg:"softMuted" rounded:"sm"
                  Box h:8 bg:"softPrimary" rounded:"sm"
                  Box h:8 bg:"softMuted" rounded:"sm"
                Flex justify:"end"
                  Icon name:"cursor-bold" fill:"surfaceText" w:7 h:7

const marketingServices:
  value:[
    {
      id:"branding"
      title:"Branding Services"
      description:"Create a clear brand system that keeps every campaign recognizable, useful, and consistent."
    },
    {
      id:"research"
      title:"Market Research"
      description:"Turn customer signals and competitive context into practical decisions your team can act on."
    },
    {
      id:"content"
      title:"Content Creation"
      description:"Produce useful content that earns attention, answers real questions, and supports conversion."
    },
    {
      id:"commerce"
      title:"e-Commerce Solutions"
      description:"Build flexible shopping journeys that connect product discovery, checkout, and retention."
    },
    {
      id:"competition"
      title:"Competitor Analysis"
      description:"Compare positioning, channels, and customer experience to uncover your strongest next move."
    },
    {
      id:"discovery"
      title:"SEO & SMM Services"
      description:"Improve discovery across search and social with one coordinated, measurable growth plan."
    },
  ]
Section id:"marketing-services-features" bg:"surface" color:"surfaceText" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:{ xs:8 md:12 }
    Flex direction:"column" align:"center" gap:3
      Flex direction:"column" align:"center" gap:0 show:{ xs:false md:true }
        Title size:"5xl" weight:"black"
          "Digital marketing that drives"
        Title size:"5xl" weight:"black"
          "results for your business"
      Title size:"4xl" weight:"black" show:{ xs:true md:false }
        "Digital marketing that drives results for your business"
      Text size:"lg" color:"muted"
        "Focused capabilities for building demand, learning faster, and growing with confidence."
    Grid columns:{ xs:1 md:2 } gap:{ xs:7 md:10 }
      each in:marketingServices as:service key:service.id
        Flex align:"start" gap:4 minH:28
          Box bg:"softPrimary" rounded:"full" p:3
            Icon name:"graph-new-up-line-duotone" fill:"primary" w:10 h:10
          Grid columns:1 gap:2
            Title size:"lg" weight:"black"
              "{service.title}"
            Text color:"muted"
              "{service.description}"

const brandCapabilities:
  value:[
    {
      id:"marketing"
      title:"Digital Marketing"
      description:"Plan campaigns around real customer needs and measurable business outcomes."
    },
    {
      id:"design"
      title:"Dev and Design"
      description:"Turn ideas into polished experiences with one coordinated product workflow."
    },
    {
      id:"analytics"
      title:"Data & Analytics"
      description:"Make performance visible and turn timely insights into confident decisions."
    },
    {
      id:"content"
      title:"Content Strategy"
      description:"Create a durable content system across channels, formats, and customer stages."
    },
  ]
Section id:"brand-transformation-features" bg:"surface" color:"surfaceText" boxed:true py:{ xs:8 md:12 }
  Grid columns:{ xs:1 md:2 } gap:{ xs:10 md:16 } align:"center"
    Flex direction:"column" gap:6
      Text size:"xs" weight:"bold" spacing:"widest" color:"muted"
        "ENDLESS POSSIBILITIES"
      Title size:{ xs:"4xl" md:"6xl" } weight:"black"
        "Transforming your brand in the digital world"
      Text color:"muted"
        "Bring strategy, design, and technology together to build a brand people understand and trust."
      Text color:"muted"
        "Move from isolated campaigns to a connected system that helps your team learn, adapt, and grow."
    Box bg:"softMuted" p:{ xs:5 md:8 }
      Grid columns:{ xs:1 sm:2 } gap:5
        each in:brandCapabilities as:capability key:capability.id
          Card rounded:"lg" shadow:"md" p:6 minH:56
            Flex direction:"column" gap:4
              Box bg:"softPrimary" rounded:"full" w:14 h:14 p:2
                Icon name:"stars-line-duotone" fill:"primary" w:10 h:10
              Title size:"lg" weight:"black"
                "{capability.title}"
              Text color:"muted"
                "{capability.description}"

const onlineCapabilities:
  value:[
    {
      id:"marketing"
      title:"Digital Marketing"
      description:"Plan campaigns around real customer needs and measurable business outcomes."
    },
    {
      id:"design"
      title:"Dev and Design"
      description:"Turn ideas into polished experiences with one coordinated product workflow."
    },
    {
      id:"analytics"
      title:"Data & Analytics"
      description:"Make performance visible and turn timely insights into confident decisions."
    },
    {
      id:"content"
      title:"Content Strategy"
      description:"Create a durable content system across channels, formats, and customer stages."
    },
  ]
Section id:"online-solutions-features" bg:"surface" color:"surfaceText" boxed:true py:{ xs:8 md:12 }
  Grid columns:{ xs:1 md:2 } gap:{ xs:10 md:16 } align:"center"
    Box bg:"softMuted" p:{ xs:5 md:8 }
      Grid columns:{ xs:1 sm:2 } gap:5
        each in:onlineCapabilities as:capability key:capability.id
          Card rounded:"lg" shadow:"md" p:6 minH:56
            Flex direction:"column" gap:4
              Box bg:"softPrimary" rounded:"full" w:14 h:14 p:2
                Icon name:"stars-line-duotone" fill:"primary" w:10 h:10
              Title size:"lg" weight:"black"
                "{capability.title}"
              Text color:"muted"
                "{capability.description}"
    Flex direction:"column" gap:6
      Text size:"xs" weight:"bold" spacing:"widest" color:"muted"
        "ONE-STOP SOLUTIONS"
      Title size:{ xs:"4xl" md:"6xl" } weight:"black"
        "Cutting-edge solutions for your online business"
      Text color:"muted"
        "Bring strategy, design, and technology together to build a business customers understand and trust."
      Text color:"muted"
        "Move from isolated tools to a connected system that helps your team learn, adapt, and grow."

const completeSolutions:
  value:[
    {
      id:"interface"
      title:"Friendly Interface"
      description:"Give every teammate a clear workspace that feels familiar from the first click."
      preview:"Workspace"
    },
    {
      id:"files"
      title:"Files Editor & Viewer"
      description:"Review assets, compare versions, and keep production files in one focused place."
      preview:"Assets"
    },
    {
      id:"flexible"
      title:"Extremely Flexible"
      description:"Adapt layouts and workflows as your products, channels, and customer needs evolve."
      preview:"Automation"
    },
  ]
Section id:"complete-solutions-features" bg:"surface" color:"surfaceText" 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:"4xl" md:"6xl" } weight:"black"
        "The Complete Solutions"
      Text size:"lg" color:"muted"
        "Everything your team needs to create, organize, and optimize digital experiences."
    Grid columns:{ xs:1 md:3 } gap:6
      each in:completeSolutions as:solution key:solution.id
        Flex direction:"column" align:"center" gap:5
          Box bg:"softMuted" rounded:"lg" p:6 w:"full" h:52
            Box bg:"surface" rounded:"lg" p:4 shadow:"sm" minH:40
              Grid columns:1 gap:4
                Flex align:"center" justify:"between"
                  Flex align:"center" gap:2
                    Icon name:"widget-4-bold-duotone" fill:"primary" w:6 h:6
                    Text weight:"bold"
                      "{solution.preview}"
                  Flex gap:2
                    Icon name:"pen-new-square" fill:"muted" w:5 h:5
                    Icon name:"add-circle" fill:"muted" w:5 h:5
                Grid columns:3 gap:2
                  Box bg:"softMuted" rounded:"md" minH:16
                  Box bg:"softWarning" rounded:"md" minH:16
                  Box bg:"softMuted" rounded:"md" minH:16
                Flex justify:"end"
                  Icon name:"cursor-bold" fill:"surfaceText" w:7 h:7
          Grid columns:1 gap:2 minH:20
            Title size:"lg" weight:"black"
              "{solution.title}"
            Text color:"muted"
              "{solution.description}"