<commit_before>For Super Rentals, we want to arrive at a home page which displays a list of rentals.
From there, we should be able to visit an about page and our contact page.

## An About Route

Let's start by building our "about" page.

In Ember, when we want to make a new page that can be visited using a URL,
we need to generate a "route" using Ember CLI. For a quick overview of how
Ember structures things, see [our diagram on the Core Concepts page](../../getting-started/core-concepts/).

Let's use Ember's route generator to start our `about` route.

```shell
ember generate route about
```

or for short,

```shell
ember g route about
```

_Note: Running `ember help generate` will list a number of other Ember resources you can create as well ..._

And here's what our generator prints out:

```shell
installing route
  create app/routes/about.js
  create app/templates/about.hbs
updating router
  add route about
installing route-test
  create tests/unit/routes/about-test.js
```

An Ember route is built with three parts:

1. An entry in the Ember router (`/app/router.js`), which maps between our route name and a specific URI
2. A route handler file, which sets up what should happen when that route is loaded _`(app/routes/about.js)`_
3. A route template, which is where we display the actual content for the page _`(app/templates/about.hbs)`_

If we open `/app/router.js`, we'll see a new line of code for the **about** route, calling
`this.route('about')` in the `Router.map` function. That new line of code tells the Ember router
to run our `/app/routes/about.js` file when a visitor navigates to `/about`.

```app/router.js{+10}
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('about');
});

export default Router;
```

Because we only plan to display static content on our about page, we won't adjust the `/app/routes/about.js`
route handler file right now. Instead, let's open our `/app/templates/about.hbs` template file and add some info about
Super Rentals:

```app/templates/about.hbs
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>
```

Now run `ember server` (or `ember serve`, or even `ember s` for short) on your command line to start
the Ember development server and then go to [`http://localhost:4200/about`](http://localhost:4200/about) to
see our new page in action!

## A Contact Route

Now let's create another route with contact details for the company.
Once again, we'll start by generating a route:

```shell
ember g route contact
```

Here again, we add a new `contact` route in `app/router.js` and generate a route handler in `app/routes/contact.js`.

In the route template `/app/templates/contact.hbs`, let's add our contact details:

```app/templates/contact.hbs
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>Super Rentals Representatives would love to help you<br>choose a destination or answer
    any questions you may have.</p><commit_msg>Switched to default of serve<commit_after>For Super Rentals, we want to arrive at a home page which displays a list of rentals.
From there, we should be able to visit an about page and our contact page.

## An About Route

Let's start by building our "about" page.

In Ember, when we want to make a new page that can be visited using a URL,
we need to generate a "route" using Ember CLI. For a quick overview of how
Ember structures things, see [our diagram on the Core Concepts page](../../getting-started/core-concepts/).

Let's use Ember's route generator to start our `about` route.

```shell
ember generate route about
```

or for short,

```shell
ember g route about
```

_Note: Running `ember help generate` will list a number of other Ember resources you can create as well ..._

And here's what our generator prints out:

```shell
installing route
  create app/routes/about.js
  create app/templates/about.hbs
updating router
  add route about
installing route-test
  create tests/unit/routes/about-test.js
```

An Ember route is built with three parts:

1. An entry in the Ember router (`/app/router.js`), which maps between our route name and a specific URI
2. A route handler file, which sets up what should happen when that route is loaded _`(app/routes/about.js)`_
3. A route template, which is where we display the actual content for the page _`(app/templates/about.hbs)`_

If we open `/app/router.js`, we'll see a new line of code for the **about** route, calling
`this.route('about')` in the `Router.map` function. That new line of code tells the Ember router
to run our `/app/routes/about.js` file when a visitor navigates to `/about`.

```app/router.js{+10}
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('about');
});

export default Router;
```

Because we only plan to display static content on our about page, we won't adjust the `/app/routes/about.js`
route handler file right now. Instead, let's open our `/app/templates/about.hbs` template file and add some info about
Super Rentals:

```app/templates/about.hbs
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>
```

Now run `ember serve` (or `ember server`, or even `ember s` for short) on your command line to start
the Ember development server and then go to [`http://localhost:4200/about`](http://localhost:4200/about) to
see our new page in action!

## A Contact Route

Now let's create another route with contact details for the company.
Once again, we'll start by generating a route:

```shell
ember g route contact
```

Here again, we add a new `contact` route in `app/router.js` and generate a route handler in `app/routes/contact.js`.

In the route template `/app/templates/contact.hbs`, let's add our contact details:

```app/templates/contact.hbs
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>Super Rentals Representatives would love to help you<br>choose a destination or answer
    any questions you may have.</p>
{'fraction_non_alphanumeric': 0.10031161893456002, 'fraction_numerical': 0.005045258940495623, 'mean_word_length': 4.164750957854406, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6331187', 'n_tokens_mistral': 2043, 'n_tokens_neox': 1966, 'n_words': 921}