<template>
    <div class="row">

        <div class="col-md-6 col-md-offset-3 main-content">
            <h1>Welcome to Turbo</h1>
            <hr />
            <div class="text-box">
                You are currently looking at the <strong style="color:red">Intro.js</strong> file 
                in the '/src/components' directory of your project. This template 
                is rendered with the Mustache templating engine.
            </div>

            <h3 class="sub-header">Routes</h3>
            <hr />

            <p>
                The routes are stored in the 'routes' directory. This scaffold comes with two sample 
                routes out of the box: index and api. To test each route, click the following links:
            </p>

            <div class="row">
                <div class="col-md-6 col-md-offset-0">
                    <div class="gray-box">
                        <h4>Index Route</h4>
                        <ul>
                            <li><a href="/json">JSON Response</a></li>
                            <li><a href="/send">Text Response</a></li>
                            <li><a href="/redirect">Redirect</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="gray-box">
                        <h4>API Route</h4>
                        <ul>
                            <li><a href="/api/profile">Resource Request</a></li>
                            <li><a href="/api/profile?team=cavaliers">With Query Params</a></li>
                            <li><a href="/api/profile/lebron_james">With ID</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <h3 class="mt-48">Static Assets</h3>
            <hr />
            <p>
                Static assets (images, js, css, etc) are located in the "public" directory. The image below 
                is rendered from the 'images' directory of the public folder:
                <br /><br />
                <img src="/images/turbo.png" />
                <br /><br />
                When deployed on Turbo Vertex, static assets are <em>automatically</em> distributed to a 
                global CDN so there is no need to set that up. If you decide to eject and deploy this 
                project on your own architecture, you will have to configure a CDN distribution (or at 
                    least you should).
            </p>

            <h3 class="mt-48">Deployment</h3>
            <hr />
            <p>
                To deploy, connect the project to a Turbo 360 project:
<pre class="pre">
<code>$ turbo connect</code>
</pre>

                Then deploy by simply entering the deploy command:
<pre class="pre">
<code>$ turbo deploy</code>
</pre>

                When deployment is complete, you will see a live link where you can access the project on the internet!
            </p>

        </div>
    </div>
</template>

<script>

export default {
    name: 'Intro'
    
}
</script>

<style scoped>
    .main-content {
        text-Align: center;
        margin-bottom: 48px;
    }

    .text-box {
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 12px;
    }

    .sub-header {
        margin-top: 48px;
    }

    .mt-48 {
        margin-top: 48px;
    }

	.gray-box {
		text-align: left;
		background: #f9f9f9;
		border: 1px solid #ddd;
		border-radius: 3px;
		padding: 12px
	}

    .gray-box ul {
        padding-left: 16px;
    }

	.pre {
		text-align: left;
		margin-top: 8px;
		background: #333;
		color: #fff;
	}
</style>