text: <can-component tag="pmo-home">
    <style type="less">
      display: block;
  
      p { font-weight: bold; }
    </style>
    <view>
      <can-import from="can-stache-route-helpers" />
      <div class="homepage">
        <img src="{{joinBase('node_modules/place-my-order-assets/images/homepage-hero.jpg')}}"
            alt="Restaurant table with glasses." width="250" height="380" />
        <h1>Ordering food has never been easier</h1>
        <p>
          We make it easier than ever to order gourmet food
          from your favorite local restaurants.
        </p>
        <p>
          <a class="btn" href="{{routeUrl(page='restaurants')}}" role="button">Choose a Restaurant</a>
        </p>
      </div>
    </view>
    <script type="view-model">
      import { DefineMap } from 'can';
  
      export default DefineMap.extend("PmoHomeVM", {
        // EXTERNAL STATEFUL PROPERTIES
        // These properties are passed from another component. Example:
        // value: {type: "number"}
  
        // INTERNAL STATEFUL PROPERTIES
        // These properties are owned by this component.
        message: { default: "This is the pmo-home component" },
  
        // DERIVED PROPERTIES
        // These properties combine other property values. Example:
        // get valueAndMessage(){ return this.value + this.message; }
  
        // METHODS
        // Functions that can be called by the view. Example:
        // incrementValue() { this.value++; }
  
        // SIDE EFFECTS
        // The following is a good place to perform changes to the DOM
        // or do things that don't fit in to one of the areas above.
        connectedCallback(element){
  
        }
      });
    </script>
  </can-component>
  